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国际 知名 的 Web 设 计 师 ，Web 标 准 项 目 组 成 
员 ，DOM Scripting 任 务 组 负责 人 之 一 ， 任 职 
于 Web 咨 询 公司 Clearleft。 除 本 书 外 ， 还 著 有 
HTMLS for Web Designers、 Bulletproof Ajaxo 
可 通过 其 个 人 网 站 adactio.com 与 他 联系 。 


知名 平面 设计 师 ，Web 开 发 人 员 ， 创 办 了 软件 
公司 We-Create 并 担任 研发 总 监 。 除 本 书 外 ， 
还 车 有 《JavaScript DOM 高 级 程序 设计 》 和 
Beginning Google Maps Applications with 
PHP and Ajax 等 多 部 畅销 书 。 
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图 灵 社 区 的 电子 书 没有 采用 专 有 客 
户 端 ， 您 可 以 在 任意 设备 上 ， 用 自 
己 喜 欢 的 浏览 器 和 PDF 阅读 器 进行 
阅读 。 

但 您 购买 的 电子 书 仅 供 您 个 人 使 用 ， 
未 经 授权 ， 不 得 进行 传播 。 

我 们 愿意 相信 读者 具有 这 样 的 良知 
和 觉悟 ， 与 我 们 共同 保护 知识 产权 。 
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责任 。 
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内 容 提 要 


本 书 讲述 了 JavaScript、DOM 和 HTML5 的 基础 知识 ， 着 重 介 绍 DOM 编程 技术 背后 的 思路 和 原则 : 平 
稳 退 化 、 渐 进 增强 和 以 用 户 为 中 心 等 。 这 些 概念 对 于 任何 前 端 Web 开发 工作 都 非常 重要 。 本 书 将 这 些 概念 
贯穿 在 书 中 的 所 有 代码 示例 中 ， 以 便 呈 现 用 来 创建 图 片 库 页 面 的 脚本 、 用 来 创建 动画 效果 的 脚本 和 用 来 丰富 
面 元 素 呈 现 效果 的 脚本 ， 最 后 结合 所 讲述 的 内 容 创建 了 一 个 实际 的 网 站 。 
本 书 适合 Web 设计 师 和 开发 人 员 阅 读 。 


i 


4 车 [ 英 ] Jeremy Keith [加 ] Jeffrey Sambells 
译 杨 涛 王建 桥 杨 晓 云 等 
审 校 魏 中 


责任 编辑 传 志 红 
执行 编辑 谢 灵芝 

4 人 民 邮 电 出 版 社 出 版 发 行 ” ”北京 市 丰台 区 成 寿 寺 路 11 号 
邮编 ”100164 电子 邮件 ”315@ptpress.com.cn 


| 


网 址 http:/www.ptpress.com.cn 
北京 印刷 
多 开本 : 800X1000 1/16 
印张 : 18.75 
字数 ，443 千 字 2011 年 4 月 第 1 版 
印 数 ，103 001 - 106 000 册 2018 年 7 月 北京 第 34 次 印刷 
著作 权 合同 登记 号 ”图 字 : 01-2011-1367 号 
定价 : 49.00 元 


读者 服务 热线 : (010)51095186 转 600” 印 装 质量 热线 : (010)81055316 
反 盗 版 热线 : (010)81055315 
广告 经 营 许可 证 : 京东 工商 广 登 字 20170147 号 


版 权 声 明 


Original English language edition, entitled DOM Scripting: Web Desien with JavaScript and the 
Document Object Model, Second Edition by Jeremy Keith and Jeffrey Sambells, published by Apress, 
2855 Telegraph Avenue, Suite 600, Berkeley, CA 94705 USA. 

Copyright © 2010 by Jeremy Keith and Jeffrey Sambells. Simplified Chinese-language edition 
copyright © 2011 by Posts & Telecom Press. All rights reserved. 


本 书 中 文 简体 字 版 由 Apress L.P. 授 权 人 民 邮 电 出 版 社 独家 出 版 。 未 经 出 版 者 书面 许可 ， 不 得 
以 任何 方式 复制 或 抄袭 本 书 内 容 。 
版 权 所 有 ， 侵 权 必 完 。 


献 给 我 的 妻子 和 第 一 位 读者 Jessica。 


Jeremy Keith 


献 给 自始至终 支持 我 的 Stephanie、Addison 和 Hayden。 


Jeffrey Sambells 


上 一 版 译 者 序 


网 上 的 生活 越 来 越 丰 富 多 彩 。 从 最 初 的 (X)HTML 网 页 ， 到 一 度 热 炒 的 DHTML 概念 ， 再 到 
近 几 年 流行 起 来 的 CSS,， 网 站 和 网 页 的 设计 工作 变 得 越 来 越 简便 ,网 上 的 内 容 越 来 越 富 于 变化 和 
色彩 。 但 是 ， 很 多 网 页 设计 者 和 网 民 朋 友 都 不 太 喜 欢 JavaScript， 这 主要 有 以 下 几 方 面 原因 。 第 
一 ， 很 多 网 页 设计 者 认为 JavaScript 的 可 用 性 很 差 一 一 早期 的 浏览 器 彼此 很 少 兼容 ， 如 果 想 让 自 
己 编写 出 来 的 JavaScript 脚本 在 多 种 浏览 器 环境 里 运行 ， 就 必须 编写 许多 用 来 探测 浏览 器 的 具体 
品牌 和 具体 版 本 的 测试 及 分 支 代码 (术语 称 之 为 “浏览 器 嗅 探 ”代码 )。 这 样 的 脚本 往往 到 处 是 
if.. .else 语句 ， 既 不 容易 阅读 ， 又 不 容易 复查 和 纠 错 ， 更 难以 做 到 让 同一 个 脚本 适用 于 所 有 的 
浏览 器 。 第 二 ， 对 广大 的 网 民 来 说 ，JavaScript 网 页 的 可 访问 性 很 差 一 一 浏览 器 会 时 不 时 地 弹出 
一 个 报错 窗口 甚至 导致 系统 死机 ， 让 人 乘 兴 而 来 、 败 兴 而 去 。 第 三 ，JavaScript 被 很 多 网 站 用 来 
实现 弹出 广告 窗口 的 功能 ， 人 们 厌烦 这 样 的 广告 ， 也 就 “ 恨 ” 屋 及 乌 地 厌烦 起 JavaScript 来 了 。 
第 四 ,“JavaScript” 这 个 名 字 里 的 “Java” 往 往 让 人 们 误 以 为 其 源 于 Java 语言 ， 而 实际 接触 之 后 
才 发 现 它 们 根本 没有 任何 联系 。 与 Java 语言 相 比 ，JavaScript 语言 要 简单 得 多 。 很 多 程序 员 宁 肯 
钻研 Java， 也 不 愿意 去 了 解 JavaScript 的 功能 和 用 法 。 

不 管 什 么 原因 ，JavaScript 曾经 不 受 欢迎 的 确 是 一 个 事实 。 

现在 ,情况 发 生 了 极 大 的 变化 。 因 为 几 项 新 技术 的 出 现 ，JavaScript 的 春天 似乎 来 了 。 首 先 ， 
W3C (万 维 网 联盟 ) 推出 的 标准 化 DOM (Document Object Model， 文 档 对 象 模型 ) 已 经 一 统 江 
湖 , 目前 市 场 上 常见 的 浏览 器 可 以 说 没有 不 支持 的 。 这 对 网 页 设计 者 来 说 意味 着 可 以 用 简单 的 “对 
象 检 测 ” 代 码 来 取代 那些 繁复 的 浏览 器 嗅 探 代码 ， 而 按照 DOM 编写 出 来 的 JavaScript 页 面 不 像 
过 去 那样 容易 出 问题 ， 这 对 网 民 来 说 意味 着 浏览 体验 变 得 流畅 了 。 其 次 ， 最 近 兴 起 的 Ajax 技术 
以 DOM 和 JavaScript 语言 (以 及 CSS 和 XHTML) 为 基本 要 素 ， 基 于 Ajax 技术 的 网 站 离 不 开 
JavaScript 和 DOM 脚本 。 
其 实 ， 人 们 对 JavaScript 的 恶劣 印象 在 很 大 程度 上 来 源 于 早期 的 程序 员 对 这 种 语言 的 滥用 。 
如 果 程 序 员 在 编写 JavaScript 脚本 的 时 候 能 够 把 问题 考虑 得 面面俱到 ， 就 可 以 避免 许多 问题 ,但 
可 惜 的 是 如 此 优秀 的 程序 员 太 少 了 。 事 实 上 ， 即 使 是 在 JavaScript 已 经 开始 流行 起 来 的 今天 ， 如 
果 程 序 员 在 编写 JavaScript 脚本 的 时 候 不 遵守 相关 的 标准 和 编程 准则 ， 也 仍 会 导致 各 种 各 样 的 
问题 。 

在 2002 年 前 后 , CSS 也 是 一 种 不 太 受 人 们 欢迎 的 Web 显示 语言 , 除了 用 它 来 改变 一 下 字体 ， 
几乎 没有 人 用 它 来 干 其 他 的 事情 。 但 没 过 多 和 久 ， 人 们 对 利用 CSS 设计 网 页 布局 的 兴趣 就 一 发 而 
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不 可 收拾 ， 整 个 潮流 也 从 那 时 扭转 了 过 来 。 现 在 ， 擎 握 CSS 已 经 成 为 许多 公司 在 招聘 网 站 开发 
人 员 时 的 一 项 要 求 。 

目前 ，DOM 编程 技术 的 现状 与 CSS 技术 在 2002 年 时 的 境况 颇 有 儿 分 相似 。 受 Google Maps 
和 Flickr 等 著名 公司 利用 DOM 编程 技术 推出 的 Gmail.Google Suggest 等 新 型 服务 的 影响 和 带动 ， 
DOM 编程 人 才 的 需求 正 日 益 增 加 。 有 越 来 越 多 的 人 开始 迷 上 了 脚本 编程 技术 ， 并 开始 学 习 如 何 
利用 DOM 技术 去 改善 而 不 是 妨碍 网 站 的 可 用 性 和 可 访问 性 。 

本 书 的 作者 Jeremy Keith 是 Web 标准 计划 DOM Scripting 任务 组 的 负责 人 之 一 , 他 在 这 本 书 
里 通过 大 量 示例 证 明了 这 样 一 个 事实 : 只 要 运用 得 当 ， 并 且 注 意 避 开 那 些 “ 经 典 的 ”JavaScript 
陷 哇 ，DOM 编程 技术 就 可 以 成 为 Web 开发 工具 箱 里 又 一 件 功能 强大 甚至 是 不 可 或 缺 的 好 东西 。 

本 书 并 不 是 一 本 参考 大 全 类 型 的 图 书 ， 作 者 只 重点 介绍 了 几 种 最 有 用 的 DOM 方法 和 属性 。 
本 书 的 精华 在 于 作者 在 书 中 提 到 的 关于 JavaScript 和 DOM 脚本 编程 工作 的 基本 原则 、 良 好 习惯 
和 正确 思路 。 如 果 读 者 能 通过 书 中 的 几 个 案例 真正 领悟 这 些 原则 、 习 惯 和 思路 ， 就 一 定 能 让 自己 
的 编程 技术 再 上 一 个 台阶 。 

这 是 一 本 非常 实用 的 好 书 , 是 一 本 值得 一 读 再 读 的 好 书 。 作 为 本 书 的 译 者 , 我们 相信 它 会 让 
每 位 读者 、 自 建 网 站 的 设计 者 和 来 到 自 建 网 站 的 访问 者 都 受益 匪 浅 。 

参加 本 书 翻译 的 人 员 还 有 韩 兰 、 李 京山 、 胡 晋平 、 高 文雅 。 
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第 2 版 已 经 出 版 了 。 

首先 ， 我 要 澄清 一 点 : 虽然 我 的 名 字 印 在 了 封面 上 ， 但 我 并 没有 参 ge 
这 个 新 版 本 完全 出 自 Jeffrey Sambells 之 手 。 出 版 社 因 为 出 新 版 的 事 找 过 我 ， 但 我 的 时 间 确 实 
排 不 开 了 。 因 此 ， 看 到 自己 的 名 字 系 列 其 间 ， 心 中 不 禁 顿 生 愧 意 。 

我 很 高 兴 地 向 读者 朋友 们 报告 , 新 版 本 中 所 有 的 修订 都 非常 符合 我 的 期 望 英文 原 书 的 封 
面 除外 。 但 不 管 怎么 说 ， 第 二 版 的 内 容 真 的 是 太 好 了 ! 在 上 一 版 的 基础 上 ， 新 版 经 过 了 扩展 ， 洒 
盖 了 如 下 三 个 新 领域 : 

口 HTMLS 
口 Ajax 
口 JavaScript 库 (尤其 是 jQuery) 

相 比 之 下 ,新 版 的 内 容 又 扩充 了 不 少 ,但 整 本 书 仍然 一 直 在 强调 最 佳 实践 (特别 是 渐进 增强 )， 
这 正 是 让 我 喜出望外 的 地 方 。 

新 版 本 中 的 代码 示例 全 部 换 成 用 HIMLS 标记 来 号 了 。 有 关 Ajax 的 示例 代码 也 精简 得 当 ， 
尽管 简略 , 但 上 下 文 仍然 能 够 传达 出 我 在 Bulletproof 4jax" 中 提出 的 观点 : 永远 不 要 假设 Ajax (或 
JavaScript 等 ) 一 定 可 用 。 

最 让 我 高 兴 的 一 点 就 是 ， 新 版 本 增加 了 主要 介绍 jQuery 的 章 方 。 这 一 章 把 本 书 前 面 的 典型 
代码 示例 ， 使 用 jQuery 重 写 了 一 遍 。 这 样 一 来 ， 正好 解 玫 了 人 们 对 为 什么 使 用 库 的 种 种 疑问 。 
它 让 你 先 理解 了 底层 代码 的 工作 原理 ， 然 后 再 告诉 你 使 用 库 为 什么 能 节省 时 间 和 精力 。 

总 而 言 之 ， 这 本 书 新 增 的 内 容 都 十 分 精彩 ， 对 读者 绝对 有 用 。 为 了 尽量 多 展示 一 些 jQuery 
的 方法 ， 也 限于 篇 幅 ， 这 一 版 以 介绍 库 的 附录 代替 了 上 一 版 介绍 DOM 方法 的 附录 。 这 多 少 让 我 
感到 有 一 些 遗 憾 ， 不 过 ， 我 会 争取 在 自己 的 博客 上 公布 第 1 版 的 附录 。 

最 后 ， 我 还 是 要 给 第 2 版 再 竖 竖 大 姆 指 ， 另 外 再 给 读者 一 点 建议 。 如 果 你 买 过 本 书 第 1 版 ， 
了 臣 怕 找 一 些 专门 讲 HTML5、Ajax 或 jQuery 的 书 看 会 比较 好 。 但 如 果 你 就 是 想 知 道 怎么 才能 正确 
地 使 用 JavaScript， 那 这 个 经 过 扩展 的 新 版 本 就 是 你 的 最 佳 选择 。 


Jeremy Keith 
2011 年 1 月 3 日 
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这 是 一 本 讲述 一 种 程序 设计 语言 的 书 ， 但 它 不 是 专门 写 给 程序 员 的 ， 而 主要 是 写 给 Web 设 
计 师 的 。 具 体 地 说 ， 本 书 是 为 那些 喜欢 使 用 CSS 和 HTML 并 愿意 遵守 编程 规范 的 Web 设 计 师 们 编 
写 的 。 

本 书 由 代码 和 概念 两 大 部 分 构成 。 不 要 被 那些 代码 吓 倒 ， 我 知道 它们 乍 看 起 来 很 喊 人 人， 可 
只 要 抓 住 了 代码 背后 的 概念 ， 就 会 发 现 你 是 在 用 一 种 新 语言 去 阅读 和 编写 代码 。 

学 习 一 种 新 的 程序 设计 语言 看 起 来 可 能 很 难 ， 但 事实 却 并 非 如 此 。DOM 脚本 看 起 来 似乎 比 
CSS 更 复杂 ， 可 只 要 领悟 了 它 的 语法 ， 你 就 会 发 现 自己 又 掌握 了 一 样 功能 强大 的 Web 开发 工 
具 。 归 根 结 底 ， 代 码 都 是 思想 和 概念 的 体现 。 

我 在 这 里 要 告诉 大 家 一 个 秘密 : 其 实 没 人 能 把 一 种 程序 设计 语言 的 所 有 语法 和 关键 字 都 记 
住 。 如 果 有 拿 不 准 的 地 方 ， 查 阅 参考 书 就 全 解决 了 。 但 本 书 不 是 一 本 参考 大 全 。 本 书 只 介绍 最 
基本 的 JavaScript 语法 。 

本 书 的 真正 目的 是 让 大 家 理解 DOM 脚本 编程 技术 背后 的 思路 和 原则 ， 或 许 你 对 其 中 一 部 分 
早 就 熟 秋 了。 平稳 退 化 、 渐 进 增强 、 以 用 户 为 中 心 的 设计 对 任何 前 端 Web 开发 工作 都 非常 重 
要 。 这 些 思路 贯穿 在 本 书 的 所 有 代码 示例 中 。 

你 将 会 看 到 用 来 创建 图 片 库 页 面 的 脚本 、 用 来 创建 动画 效果 的 脚本 和 用 来 丰富 页 面 元 素 呈 
现 效果 的 脚本 。 如 果 你 愿意 ， 完 全 可 以 把 这 些 例 子 剪贴 到 自己 的 代码 中 ， 但 更 重要 的 是 理解 这 
些 代码 背后 的 “如 何 ” 和 “为 什么 ” 。 

如 果 你 已 经 在 使 用 CSS 和 HTML 来 把 设计 思路 转化 为 活生生 的 网 页 ， 就 应 该 知道 Web 标准 
有 多 么 重要 。 还 记得 你 是 在 何 时 发 现 自己 只 需 修 改 一 个 CSS 文件 就 可 以 改变 整个 网 站 的 视觉 效 
果 吗 ? DOM 技术 有 着 同样 强大 的 威力 。 不 过 ， 能 力 越 大 ， 责 任 也 就 越 大 。 因 此 ， 我 不 仅 想 让 你 
看 到 用 DOM 脚本 实现 的 超 栈 效果， 更 想 让 你 看 到 怎样 才能 利用 DOM 脚本 编程 技术 以 一 种 既 方 
便 自己 更 体贴 用 户 的 方式 去 充实 和 完善 网 页 。 

如 果 需 要 本 书 所 讨论 的 相关 代码 ”， 到 www.friendsofed.com 网 站 搜索 本 书 的 主页 就 可 以 查 
到 。 还 可 以 在 这 个 网 站 找到 friends of ED 出 版 社 的 所 有 其 他 好 书 ， 内 容 涉 及 Web 标准 、Flash、 
DreamWeaver 以 及 许多 细 分 的 计算 机 领域 。 

你 对 JavaScript 的 探索 不 应 该 在 合 上 本 书 时 就 停止 下 来 。 我 开设 了 http://domscripting.com/ 网 
站 ， 在 那里 继续 与 大 家 共同 探讨 现代 的 、 标 准 化 的 JavaScript。 我 希望 你 能 到 该 网 站 看 看 。 与 此 
同时 ， 我 更 希望 本 书 能 够 对 大 家 有 所 帮助 。 祝 你 们 好 运 ! 


@ 本 书 代码 示例 也 可 从 图 灵 网 站 wwwturingbook .com 本 书 网 页 免费 注册 下 载 。 一 编者 注 
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JavaScript 简 史 


本 章 内 容 

口 JavaScript 的 起 源 
口 浏览 器 战争 

D DOM 的 演变 史 


本 书 第 1 版 面世 的 时 候 , 做 一 名 Web 设计 师 是 件 很 让 人 兴奋 的 事 。5 个 年 头 过 去 了 ， 这 个 职 
业 依 然 保 持 着 强大 的 吸引 力 。 特别 是 JavaScript, 经 历 了 从 被 人 误解 到 万 众 瞩 目的 巨大 转变 。Web 
开发 呢 ， 也 已 从 混乱 无 序 的 状态 ,发展 成 一 门 需要 严格 训练 才能 从 事 的 正规 职业 。 无 论 设计 师 还 
是 开发 人 员 ， 在 创建 网 站 的 过 程 中 都 积极 地 采用 标准 技术 ，Web 标准 已 经 深入 人 心 。 

当 网 页 设计 人 员 谈 论 起 与 Web 标准 有 关 的 话题 时 ,HTML ( 超 文本 标记 语言 ) 和 CSS〈 层 二 
样式 表 ) 通常 占据 着 核心 地 位 。 不 过 ，W3C (万 维 网 联盟 ) 已 批准 另 一 项 技术 ， 所 有 与 标准 相 兼 
容 的 Web 训 览 堪 都 支持 它 ， 这 就 是 DOM (文档 对 象 模 型 )。 我 们 可 以 利用 DOM 给 文档 增加 交 
互 能 力 ， 就 像 利 用 CSS 给 文档 添加 各 种 样式 一 样 。 

在 开始 学 习 DOM 之 前 ,我们 先 检视 一 下 使 网 页 具备 交互 能 力 的 程序 设计 语言 。 这 种 语言 就 
是 JavaScript， 它 已 经 诞生 相当 长 的 时 间 了 。 


1.1 ” JavaScript 的 起 源 


JavaScript 是 Netscape 公司 与 Sun 公司 合作 开发 的 。 在 JavaScript 出 现 之 前 ，Web 浏览 器 不 
过 是 一 种 能 够 显示 超 文本 文档 的 简单 的 软件 。 而 在 JavaScript 出 现 之 后 ， 网 页 的 内 容 不 再 局 限于 
枯燥 的 文本 ， 它 们 的 可 交互 性 得 到 了 显著 的 改善 。JavaScript 的 第 一 个 版 本 ， 即 JavaScript 1.0 版 
本 ， 出 现在 1995 年 推出 的 Netscape Navigator 2 浏览 器 中 。 

在 JavaScript 1.0 发 布 时 ，Netscape Navigator 主宰 着 浏览 器 市 场 , 微软 的 正 浏览 器 则 扮演 着 
追赶 者 的 角色 。 微 软 在 推出 正 3 的 时 候 发 布 了 自己 的 VBScript 语 言 ， 同 时 以 JScript 为 名 发 布 了 
JavaScript 的 一 个 版 本 , 以 此 很 快 跟 上 了 Netscape 的 步伐 。 面 对 微软 公司 的 竞争 , Netscape 和 Sun 
公司 联合 ECMA (欧洲 计算 机 制造 商 协 会 ) 对 JavaScript 语言 进行 了 标准 化 。 于 是 出 现 了 
ECMAScript 语言 ， 这 是 同一 种 语言 的 另 一 个 名 字 。 虽 说 ECMAScript 这 个 名 字 没 有 流行 开 来 ， 
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但 人 们 现在 谈论 的 JavaScript 实际 上 就 是 ECMAScript。 
到 了 1996 年 ，JavaScript、ECMAScript、JScript 一 一 随便 你 们 怎么 称呼 它 一 一 已 经 站 稳 了 上 脚 
跟 。Netscape 和 微软 公司 在 各 自 的 第 3 版 浏览 器 中 都 不 同 程度 地 支持 JavaScript 1.1 语言 。 


注意 JavaScript 与 Sun 公司 开发 的 Java 程序 语言 没有 任何 联系 。JavaScript 最 开始 的 名 字 是 
LiveScript， 后 来 选择 “JavaScript” 作 为 其 正式 名 称 的 原因 ， 大 概 是 想 让 它 听 起 来 有 系 出 
名 门 的 感觉 。 但 令 人 遗憾 的 是 ， 这 一 选择 容易 让 人 们 把 这 两 种 语言 混为一谈 ,而 这 种 混 
消 又 因为 各 种 Web 浏览 器 确实 具备 这 样 或 那样 的 Java 客户 闸 支 持 功能 而 进一步 加 剧 。 事 
实 上 ，Java 在 理论 上 几乎 可 以 部 署 在 任何 环境 ， 但 JavaScript 却 倾向 于 只 应 用 在 Web 浏 
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JavaScript 是 一 种 脚本 语言 ， 通 常 只 能 通过 Web 浏览 器 去 完成 一 些 操作 而 不 能 像 普通 意义 上 
的 程序 那样 独立 运行 。 因 为 需要 由 Web 浏览 器 进行 解释 和 执行 ， 所 以 JavaScript 脚本 不 像 Java 
和 C++ 等 编译 型 程序 设计 语言 那样 用 途 广泛 。 不 过 , 这 种 相对 的 简单 性 也 正 是 JavaScript 的 长 处 : 
比较 容易 学 习 和 掌握 , 所 以 那些 本 身 不 是 程序 员 , 但 希望 通过 简单 的 剪贴 操作 把 脚本 戏 入 现 有 网 
页 的 普通 用 户 很 快 就 接受 了 JavaScript。 

JavaScript 还 向 程序 员 提 供 了 一 些 操控 Web 浏览 器 的 手段 。 例如 ,JavaScript 语言 可 以 用 来 调 
整 Web 浏览 器 窗口 的 高 度 、 宽 度 和 位 置 等 属性 。 这 种 设 定 浏览 器 属性 的 办 法 可 以 看 做 是 BOM ( 浏 
览 器 对 象 模型 )。JavaScript 的 早期 版 本 还 提供 了 一 种 初级 的 DOM。 


1.2 DOM 


什么 是 DOM? 简单 地 说 ，DOM 是 一 套 对 文档 的 内 容 进行 抽象 和 概念 化 的 方法 。 
在 现实 世界 里 ， 人 们 对 所 谓 的 “世界 对 象 模型 ”都 不 会 陌生 。 例 如 ， 当 用 “汽车 “房子 " 
和 “ 树 ” 等 名 词 来 称呼 日 常生 活 环境 里 的 事物 时 ， 我 们 可 以 百分之百 地 肯定 对 方 知道 我 们 说 的 是 
什么 , 这 是 因为 人 们 对 这 些 名 词 所 代表 的 东西 有 着 同样 的 认识 。 于 是 ， 当 对 别人 说 “汽车 停 在 了 
车 库 里 ”时 ， 可 以 断定 他 们 不 会 理解 为 “小 岛 关 在 了 壁橱 里 ”。 

我 们 的 “世界 对 象 模型 ”不 仅 可 以 用 来 描述 客观 存在 的 事物 ， 还 可 以 用 来 描述 抽象 概念 。 例 
如 ， 假 设 有 个 人 向 我 问 路 ， 而 我 给 出 的 答案 是 “左边 第 三 栋 房子 ”"。 这 个 答案 有 没有 意义 将 取决 
于 那个 人 能 否 理 解 “第 三 ”和 “左边 ”的 含义 。 如 果 他 不 会 数 数 或 者 分 不 清 左 右 ， 则 不 管 他 是 否 
理解 这 几 个 概念 ， 我 的 回答 对 他 都 不 会 有 任何 帮助 。 在 现实 世界 里 ， 正 是 因为 大 家 对 抽象 的 世界 
对 象 模型 有 着 基本 的 共识 ， 人 们 才能 用 非常 简单 的 话 表达 出 复杂 的 含义 并 得 到 对 方 的 理解 。 
具体 到 这 里 的 例子 ， 你 可 以 相当 有 把 握 地 断定 ， 其 他 人 对 “第 三 ”和 “左边 ”的 理解 和 我 完 
全 一 样 


这 个 道理 对 网 页 也 同样 适用 。JavaScript 的 早期 版 本 向 程序 员 提供 了 查询 和 操控 Web 文档 某 
些 实际 内 容 (主要 是 图 像 和 表单 ) 的 手段 。 因 为 JavaScript 预先 定义 了 “images” 和 “forms” 等 
术语 ， 我 们 才能 像 下 面 这 样 在 JavaScript 脚本 里 引用 “文档 中 的 第 三 个 图 像 ”或 “文档 中 名 为 
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“details ”的 表单 ”: 


document. images[2] 
document. forms['details'] 


现在 的 人 们 通常 把 这 种 试验 性 质 的 初级 DOM 称 为 “第 0 级 DOM”(DOM Level10)。 在 还 
未 形成 统一 标准 的 初期 阶段 , “第 0 级 DOM 的 常见 用 途 是 翻转 图 片 和 验证 表单 数据 。 Netscape 
和 微软 公司 各 自 推 出 第 四 代 浏 览 器 产品 以 后 ，DOM 开始 遇 到 麻烦 ， 陷 入 困境 。 


1.3 浏览 器 战争 
Netscape Navigator 4 发 布 于 1997 年 6 月 , 了 正 4 发 布 于 同年 10 月 。 这 两 种 浏览 器 都 对 它们 的 


早期 版 本 进行 了 许多 改进 ， 大 幅 扩展 了 DOM， 使 能 够 通过 JavaScript 完成 的 功能 大 大 增加 。 而 
网 页 设计 人 员 也 开始 接触 到 一 个 新 名 词 : DHTML。 


1.3.1 DHTML 


DHTML 是 “Dynamic HTML”( 动 态 HTML) 的 简称 。DHTML 并 不 是 一 项 新 技术 ,而 是 描 
述 HIML、CSS 和 JavaScript 技术 组 合 的 术语 。DHTML 背后 的 含义 是 : 
D 利用 HTML 把 网 页 标记 为 各 种 元 素 ; 
D 利用 CSS 设置 元 素 样式 和 它们 的 显示 位 置 ; 
D 利用 JavaScript 实时 地 操控 页 面 和 改变 样式 。 

利用 DHTML, 复杂 的 动画 效果 一 下 子 变 得 非常 容易 实现 。 例 如 , 用 HTML 标记 一 个 页 面 元 
素 : 


<div id="myelement">This is my element</div> 


然后 用 CSS 为 这 个 页 面 元 素 定义 如 下 位 置 样式 : 


#myelement { 
position: absolute; 
left: 50pX; 
top: 100px; 


接 下 来 ， 只 需 利用 JavaScript 改变 myelement 元 素 的 left 和 top 样式 ， 就 可 以 让 它 在 页 面 上 
随意 移动 。 不 过 ， 这 只 是 理论 而 已 。 

不 幸 的 是 ，NN 4 和正 4 浏览 器 使 用 的 是 两 种 不 兼容 的 DOM。 换 旬 话 说 ， 虽 然 浏 览 器 制造 
商 的 目标 一 样 ， 但 他 们 在 解决 DOM 问题 时 采用 的 办 法 却 完全 不 同 。 


1.3.2 浏览 器 之 间 的 冲突 


Netscape 公司 的 DOM 使 用 了 专 有 元 素 , 这 些 元 素 称 为 层 (layer)。 层 有 唯一 的 ID, JavaScript 
代码 需要 像 下 面 这 样 引用 它们 : 
document ,1ayers['myelement'] 


而 在 微软 公司 的 DOM 中 这 个 元 素 必 须 像 下面 这 样 引用 : 
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document.all[ ‘myelement'] 

这 两 种 DOM 的 差异 并 不 止 这 一 点 。 假 设 你 想 找 出 myelement 元 素 的 left 位 置 并 把 它 赋 值 给 
变量 xpos， 那 么 在 Netscape Navigator 4 浏览 器 里 必须 这 样 做 : 

var xpos = document.1ayers[ "myelement '].1left; 

而 在 下 4 浏览 器 中 ， 需 要 使 用 如 下 所 示 的 语句 才能 完成 同样 的 工作 : 

var xpos = document.all[ ‘myelement'].leftpos; 

这 就 导致 了 一 种 很 可 笑 的 局 面 : 程序 员 在 编写 DOM 脚本 代码 时 必须 知道 它们 将 运行 在 哪 种 
浏览 器 环境 里 ， 所 以 在 实际 工作 中 , 许多 脚本 都 不 得 不 编写 两 次 , 一 次 为 Netscape Navigator， 另 
一 次 为 了 正 。 同 时 ， 为 了 确保 能 够 正确 地 向 不 同 的 阐 览 器 提供 与 之 相应 的 脚本 ， 程 序 员 还 必须 编 
写 一 些 代码 去 探查 在 客户 端 运 行 的 浏览 器 到 底 是 哪 一 种 。 

DHTML 打开 了 一 个 充满 机 会 的 新 世界 , 但 想 要 进入 其 中 的 人 们 却 发 现 这 是 个 充满 苦难 的 世 
界 。 因 此 ， 没 多 和 久 ，DHTML 就 从 一 个 大 热门 变 成 了 一 个 人 们 不 愿 提起 的 名 词 ， 而 对 这 种 技术 的 
评价 也 很 快 地 变 成 了 “宣传 嗪 头 ” 和 “难以 实现 。 


1.4 制定 标准 


就 在 浏览 器 制造 商 以 DOM 为 武器 展开 营销 大 战 的 同时 ，W3C 不 事 声张 地 结合 大 家 的 优点 
推出 了 一 个 标准 化 的 DOM。 令 人 欣慰 的 是 ，Netscape、 微 软 和 其 他 一 些 浏览 器 制造 商 们 还 能 抛 
开 彼 此 的 敌意 而 与 W3C 携手 制定 新 的 标准 ,并 于 1998 年 10 月 完成 了 “第 1 级 DOM” (DOM Level 
1)。 

回 到 刚才 的 例子 ， 我 们 已 经 用 <div> 标 签 定义 了 一 个 ID 为 myelement 的 页 面 元 素 ， 现 在 需要 
找 出 它 的 left 位 置 并 把 这 个 值 保存 到 变量 xpos 中 。 下 面 是 使 用 新 的 标准 化 DOM 时 需要 用 到 的 
语法 : 

var xpos = document .getElementById( "myelement ' ).style.1left 

乍 看 起 来 ， 这 与 刚才 那 两 种 非 标 准 化 的 专 有 DOM 相 比 并 没有 明显 的 改进 。 但 事实 上， 标准 
化 的 DOM 有 着 非常 远大 的 抱负 。 

浏览 器 制造 商 们 感 兴趣 的 只 不 过 是 通过 JavaScript 操控 网 页 的 具体 办 法 ,但 W3C 推出 的 标 
准 化 DOM 却 可 以 让 任何 一 种 程序 设计 语言 对 使 用 任何 一 种 标记 语言 编写 出 来 的 任何 一 份 文档 进 
行 操控 。 


1.4.1 浏览 器 以 外 的 考虑 


DOM 是 一 种 API (应 用 编程 接口 )。 简 单 地 说 ，API 就 是 一 组 已 经 得 到 有 关 各 方 共同 认可 的 
基本 约定 。 在 现实 世界 中 ， 相 当 于 API 的 例子 包括 (但 不 限于 ) 摩尔 斯 码 、 国 际 时 区 、 化 学 元 素 
周期 表 。 以 上 这 些 都 是 不 同学 科 领 域 中 的 标准 ， 它 们 使 得 人 们 能 够 更 方便 地 交流 与 合作 。 如 果 没 
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有 一 个 统一 的 标准 ,事情 往往 会 演变 成 为 一 场 灾 难 。 别 忘 了 ， 因 混 淆 英制 度量 衡 与 公制 度量 衡 至 
少 导致 过 一 次 火星 探测 任务 的 失败 。 

在 软件 编程 领域 中 ， 虽 然 存 在 着 多 种 不 同 的 语言 ， 但 很 多 任务 却 是 相同 或 相似 的 。 这 也 正 是 
人 们 需要 API 的 原因 。 一 旦 掌握 了 某 个 标准 ， 就 可 以 把 它 应 用 在 许多 不 同 的 环境 中 。 虽 然 语法 会 
因为 使 用 的 程序 设计 语言 而 有 所 变化 ， 但 这 些 约定 却 总 是 保持 不 变 的 。 

因此 ， 虽 然 本 书 的 重点 是 教会 你 如 何 通过 JavaScript 使 用 DOM， 当 你 需要 使 用 诸如 PHP 或 
Python 之 类 的 程序 设计 语言 去 解析 XML 文档 的 时 候 , 你 获得 的 DOM 新 知识 将 会 有 很 大 的 
帮助 。 

W3C 对 DOM 的 定义 是 :“ 一 个 与 系统 平台 和 编程 语言 无 关 的 接口 ， 程 序 和 脚本 可 以 通过 这 
个 接口 动态 地 访问 和 修改 文档 的 内 容 、 结 构 和 样式 。 W3C 推出 的 标准 化 DOM， 在 独立 性 和 适 
用 范围 等 诸多 方面 ， 都 远 远 超出 了 各 自 为 战 的 浏览 器 制造 商 们 推出 的 各 种 专 有 DOM。 


1.4.2 浏览 器 战争 的 结局 


我 们 知道 ， 浏 览 器 市 场 份额 大 战 中 微软 公司 战胜 了 Netscape， 具 有 讽刺 意味 的 是 ， 专 有 的 
DOM 和 HTML 标记 对 这 个 最 终结 果 几 平 没有 产生 影响 。 IE 浏览 器 注定 能 击败 其 他 对 手 , 不 过 是 
因为 所 有 运行 Windows 操作 系统 的 个 人 电脑 都 预 装 了 它 。 

受 浏览 器 战争 影响 最 大 的 人 群 是 那些 网 站 设计 人 员 。 跨 浏览 器 开发 曾经 是 他 们 的 开 梦 。 除了 
刚才 提 到 的 那些 在 JavaScript 实现 方面 的 差异 之 外 ，Netscape Navigator 和 IE 这 两 种 浏览 器 在 对 
CSS 的 支持 方面 也 有 许多 非常 不 同 的 地 方 。 而 编写 那些 可 以 同时 支持 这 两 种 浏览 器 的 样式 表 和 
脚本 的 工作 也 成 了 一 种 黑色 艺术 。 

浏览 器 制造 商 的 自私 姿态 遭 到 人 们 的 激烈 反对 ， 一 个 名 为 Web 标准 计划 (简称 WaSP， 
http://webstandards.org/) 的 小 组 应 运 而 生 。WaSP 小 组 采取 的 第 一 个 行动 就 是 ， 鼓 励 浏 览 器 制造 
商 们 采用 W3C 制定 和 推荐 的 各 项 标准 ， 也 就 是 在 浏览 器 制造 商 们 的 帮助 下 得 以 起 草 和 完善 的 那 
些 标 准 。 

或 许 是 因为 来 自 WaSP 小 组 的 压力 ， 又 或 许 是 因为 企业 的 内 部 决策 ， 下 一 代 浏 览 器 产品 对 
Web 标准 的 支持 得 到 了 极 大 的 改善 。 


1.4.3 ” 轩 新 的 起 点 


早期 浏览 器 大 战 至 今 , 浏览 器 市 场 已 经 发 生 了 巨大 的 变化 , 而 且 到 了 今天 , 这 一 切 也 几乎 每 
天 都 有 变化 。 有 的 浏览 器 ， 比 如 Netscape Navigator， 差不多 已 经 从 人 们 的 视野 中 消失 了 , 而 新 一 
代 浏 览 器 则 陆续 登台 亮相 。 苹 果 公 司 在 2003 年 首次 发 布 了 它 的 Safari 浏览 器 (基于 WebKit)， 
它 从 一 开始 就 坚定 不 移 地 遵循 DOM 标准 。 今 天 , 包括 Firefox、Chrome、Opera 和 下， 以 及 一 些 
基于 WebKit 的 其 他 浏览 器 都 对 DOM 有 着 良好 的 支持 。 很 多 最 讲 的 智能 手机 六 览 器 都 在 使 用 
WebKit 这 染 引擎 ， 推 动 着 手机 浏览 器 开发 不 断 向 前 ， 让 手机 上 网 的 体验 甚至 好 过 了 使 用 某 些 桌 
面 浏览 器 。 
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注意 WebKit(http://webkit.org) 是 Safari 和 Chrome 采用 的 一 个 开源 Web 浏览 器 引擎 .以 WebKit 
和 Gecko (Firefox 的 核心 ，https://developer.mozilla.org/en/Gecko) 为 代表 的 开源 引 学 ， 在 
促进 微软 的 Trident (IE 的 核心 ) 等 专 有 浏览 器 引擎 逐步 向 Web 标准 靠拢 方面 起 到 特别 积 
极 的 作用 。 


今天 ， 几 乎 所 有 的 浏览 器 都 内 置 了 对 DOM 的 支持 。20 世纪 90 年 代 后 期 的 浏览 器 大 战 的 硝 
烟 已 经 散 尽 。 现 在 的 浏览 器 厂商 无 一 不 在 和 争先恐后 地 实现 最 新 规范 。 我 们 已 经 目睹 了 由 异步 数据 
传输 技术 (Ajax) 所 引发 的 学 习 DOM 脚本 编程 的 热潮 ， 而 HTML5 DOM 的 众多 新 特性 ， 怎 能 
不 让 人 对 Web 的 未 来 序 想 联 遍 ? HTML5 极 大 地 改进 了 标记 的 语义 , 让 我 们 通过 <audio> 和 <video> 
得 以 控制 各 种 媒体 ，<canvas> 元 素 具 备 了 完善 的 绘图 能 力 ， 浏 览 器 本 地 存储 超越 了 cookie 限制 
更 有 内 置 的 拖 放 支持 ， 等 等 。 

Web 设计 师 的 日 子 已 经 今 非 背 比 。 尽 管 还 没有 一 款 浏 览 器 完美 无 瑕 地 实现 W3C DOM, 但 
所 有 现代 浏 览 器 对 DOM 特性 的 覆盖 率 都 基本 达到 了 95%， 而 且 每 款 浏 览 器 都 几乎 会 在 第 一 时 
间 实 现 最 新 的 特性 。 这 意味 着 什么 ? 意味 着 大 量 的 任务 都 不 必 依靠 分 支 代码 了 。 以 前 ， 为 了 探 
查 浏 览 器 ， 我 们 不 得 不 编写 大 量 分 支 判 断 脚 本 ， 现 在， 终于 可 以 实现 “编写 一 次 ， 随 处 运行 ” 
的 梦想 了 。 只 要 遵循 DOM 标准 ， 就 可 以 放心 大 胆 地 去 做 ， 因 为 你 的 脚本 无 论 在 哪里 都 不 会 遇 
到 问题 。 


1.5 ”小结 


在 前 面 对 JavaScript 发 展 简 史 的 介绍 中 ， 笔 者 特别 提 到 ， 不 同 的 浏览 器 采用 了 不 同 的 办 法 来 
完成 同样 的 任务 。 这 一 无 法 回避 的 事实 不 仅 主 宰 着 如 何 编写 JavaScript 脚本 代码 ， 还 影响 着 
JavaScript 教科 书 的 编写 方式 。 

JavaScript 教科 书 往 往 会 提供 大 量 的 示例 代码 以 演示 这 种 脚本 语言 的 使 用 方法 ， 而 完成 同一 
项 任务 的 示例 脚本 往往 需要 为 不 同 的 浏览 器 编写 两 次 或 更 多 次 。 就 像 你 在 绝 大 多 数 网 站 上 查 到 的 
代码 一 样 ， 在 绝 大 多 数 JavaScript 教科 书 的 示例 脚本 中 往往 充斥 着 大 量 的 浏览 器 探查 代码 和 分 支 
调用 结构 。 类 似 地 ， 在 JavaScript 技术 文档 中 ， 国 数 和 方法 的 清单 也 往往 是 一 式 多 份 一 一 至 少 需 
要 标明 哪 种 浏览 器 支持 哪些 函数 和 方法 。 

如 今 这 种 情况 已 经 有 所 改变 。 多 亏 了 标准 化 的 DOM， 不同 的 浏览 器 在 完成 同样 的 任务 时 采 
用 的 做 法 已 经 非常 一 致 了 。 因 此 ， 在 本 书 中 ， 当 演示 如 何 使 用 JavaScript 和 DOM 完成 某 项 任务 
时 ， 将 不 再 需要 撒 开 主题 去 探讨 如 何 对 付 不 同 的 浏览 器 。 如 果 无 特殊 的 必要 ， 本 书 将 尽量 避免 涉 
及 任何 一 种 特定 的 浏览 器 。 

此 外 ， 我 们 在 本 书后 面 的 内 容 中 将 不 再 使 用 “DHTML” 这 个 术语 ， 因 为 这 个 术语 与 其 说 是 
一 个 技术 性 词语 ， 不 如 说 是 一 个 市 场 营销 喷头 。 首 先 ， 它 听 起 来 很 像 是 HIML 或 XHTML 语言 
的 另 一 种 扩展 ， 因 而 很 容易 造成 误解 或 混淆 ， 其 次 ， 这 个 术语 容易 勾 起 一 些 痛苦 的 回忆 一 一 如 果 
你 向 20 世纪 90 年 代 后 期 的 程序 员 们 提起 “DHTML”, 你 将 很 难 让 他 们 相信 它 现在 已 经 变 成 了 一 


种 简单 、 易 用 的 标准 化 技术 。 

DHTML 曾 被 认为 是 HTML/XHTML、CSS 和 JavaScript 相 结 合 的 产物 ， 就 像 今 天 的 HTML5 
那样 ， 但 把 这 些 东 西 真 正 凝 聚 在 一 起 的 是 DOM。 如 果真 的 需要 来 描述 这 一 过 程 的 话 ， “DOM 脚 
本 程序 设计 ”更 精确 ， 它 表示 使 用 W3C DOM 来 处 理 文档 和 样式 表 。DHTML 只 适用 于 Web 文 
档 ,“DOM 脚本 程序 设计 ” 则 涵盖 了 使 用 任何 一 种 支持 DOM API 的 程序 设计 语言 去 处 理 任 何 一 
种 标记 文档 的 情况 。 具 体 到 Web 文档 ，JavaScript 的 无 所 不 在 使 它 成 为 了 DOM 脚本 程序 设计 的 
最 佳 选 择 。 

在 正式 介绍 DOM 脚本 程序 设计 技巧 之 前 ， 我 们 将 在 下 一 章 先 简要 地 复习 一 下 JavaScript 的 
语法 。 


JavaScript 语法 


本 章 内 容 

0 语句 

D 变量 和 数组 

D 操作 符 

0 条 件 语 句 和 循环 语句 
D 函数 与 对 象 


本 章 将 简要 复习 一 下 JavaScript 语 法 ， 并 介绍 其 中 最 重要 的 一 些 概念 。 
准备 工作 


编写 JavaScript 脚本 不 需要 任何 特殊 的 软件 ,一 个 普通 的 文本 编辑 器 和 一 个 Web 浏览 器 就 足 


够 了 。 


用 JavaScript 编写 的 代码 必须 通过 HTML/XHTML 文档 才能 执行 有 两 种 方式 可 以 做 到 这 点 。 


第 一 种 方式 是 将 JavaScript 代码 放 到 文档 <head> 标 签 中 的 <script> 标 签 之 间 : 


<!DOCTYPE html > 
<html lang="en"> 
<head> 
<meta charset="utf-8"/> 
<title>Example</title> 
<SCIipt> 
JavaScript goes here... 
</script> 
</head> 
<body> 
Mark-up goes here... 
</body> 
</html> 


一 种 更 好 的 方式 是 把 JavaScript 代码 存 为 一 个 扩展 名 为 js 的 独立 文件 。 典 型 的 作法 是 在 文档 


的 <head> 部 分 放 一 个 <script> 标 签 ， 并 把 它 的 src 属性 指向 该 文件 : 


<!DOCTYPE html> 
<htm] lang="en"> 
<head> 
<meta charset="utf-8"/> 
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<title>Example</title> 
<script src="file.js"></script> 
</head> 
<body> 
Mark-up goes here... 
</body> 
</html> 


但 最 好 的 做 法 是 把 <script> 标 签 放 到 HTML 文档 的 最 后 ，</body> 标 签 之 前 : 
<!DOCTYPE html> 
<html] lang="en"> 
<head> 
<meta charset="utf-8"/> 
<title>Example</title> 
</head> 
<body> 
Mark-up goes here... 
«<script src="file.js"></script> 
</body> 
</html> 


这 样 能 使 浏览 器 更 快 地 加 载 页 面 (第 5 章 将 详细 讨论 这 个 问题 )。 


注意 前 面 例子 中 的 <script> 标 签 没有 包含 传统 的 type="text/javascript" 属 性 。 因 为 脚本 默认 是 
JavaScript， 所 以 没 必要 指定 这 个 属性 。 


如 果 打 算 实践 一 下 本 章 中 的 例子 ， 用 一 个 文本 编辑 器 创建 两 个 文件 。 先 创建 一 个 简单 的 
HTML 或 XHTML 文件 , 保存 为 诸如 test.html 之 类 的 名 称 。 这 个 文件 中 一 定 要 包含 一 个 <script> 
标签 ， 这 个 标签 的 src 属性 设置 成 你 创建 的 第 二 个 文件 的 名 字 ， 比 如 example.js。 

你 的 test.html 文件 应 该 包含 如 下 内 容 : 


<!DOCTYPE html > 
<html] lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Just a test</title> 
</head> 
<body> 
<script src="example.js"></script> 
</body> 
</html> 


可 以 把 本 章 中 的 任何 一 个 示例 复制 到 你 的 example.js 文件 中 。 虽说 那些 示例 没有 什么 特别 令 
人 激动 的 地 方 ， 但 它们 可 以 把 有 关 的 语法 演示 得 明明 白白 。 

在 本 书后 面 的 章节 里 , 我 们 将 演示 如 何 使 用 JavaScript 改变 文档 的 行为 和 内 容 。 但 在 本 章 里 ， 
我 们 只 使 用 一 个 简单 的 对 话 框 来 显示 消息 。 

如 果 改 变 了 example.js 文件 的 内 容 ， 只 需 在 Web 浏览 器 中 重新 载 入 test.htm] 文档 即 可 看 到 
效果 。Web 浏览 器 会 立刻 解释 并 执行 你 的 JavaScript 代码 。 

程序 设计 语言 分 为 解释 型 和 编译 型 两 大 类 。Java 或 C++ 等 语言 需要 一 个 编译 器 (compiler)。 
编译 器 是 一 种 程序 ， 能 够 把 用 Java 等 高 级 语言 编写 出 来 的 源 代码 翻译 为 直接 在 计算 机 上 执行 的 
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文件 。 

解释 型 程序 设计 语言 不 需要 编译 器 一 一 它们 仅 需 要 解释 器 。 对 于 JavaScript 语言 ， 在 互联 网 
环境 下 ，Web 浏览 器 负责 完成 有 关 的 解释 和 执行 工作 。 浏 览 器 中 的 JavaScript 解释 器 将 直接 读 入 
源 代码 并 执行 。 浏 览 器 中 如 果 没 有 解释 器 ，JavaScript 代码 就 无 法 执行 。 

用 编译 型 语言 编写 的 代码 有 错误 ， 这 些 错 误 在 代码 编译 阶段 就 能 被 发 现 。 而 解释 型 语言 代 
码 中 的 错误 只 能 等 到 解释 器 执行 到 有 关 代 码 时 才能 被 发 现 。 

与 解释 型 语言 相 比 ,编译 型 语言 往往 速度 更 快 ， 可 移植 性 更 好 ,但 它们 的 学 习 曲 线 也 往往 相 
当 陡 峭 。 

JavaScript 的 优点 之 一 就 是 相当 容易 入 门 ， 但 千 万 不 要 因此 小 看 JavaScript， 甚 实 它 能 完成 许 
多 相当 复杂 的 编程 任务 。 不 过 ， 本 章 主 要 介绍 它 最 基本 的 语法 和 用 法 。 
2.2 语法 

英语 是 一 种 解释 型 语言 。 在 阅读 和 处 理 我 们 用 英语 写 出 来 的 文字 时 , 你 就 相当 于 一 个 英语 解 
释 器 。 只 要 遵守 英语 的 语法 规则 ,我 们 想 表 达 的 意思 就 可 以 被 正确 地 解读 。 这 些 语言 结构 方面 的 
各 项 规则 ， 我 们 就 称 之 为 “语法 ”。 

如 同 书面 的 人 类 语言 ,每 种 程序 设计 语言 也 都 有 自己 的 语法 。JavaScript 的 语法 与 Java 和 C++ 
语言 的 语法 非常 相似 。 


2.2.1 语 铝 


用 JavaScript 编写 的 脚本 ， 与 其 他 语言 编写 出 来 的 脚本 一 样 ， 都 由 一 系列 指令 构成 ， 这 些 指 
令 叫 做 语句 (statement)。 只 有 按照 正确 的 语法 编写 出 来 的 语句 才能 得 到 正确 的 解释 。 

JavaScript 语句 与 英语 中 的 句子 很 相似 。 它 们 是 构成 任何 一 个 脚本 的 基本 单位 。 

英语 语法 要 求 每 个 句子 必须 以 一 个 大 写字 母 开头 、 以 一 个 句号 结尾 。JavaScript 在 这 方面 的 
要 求 不 那么 严格 ， 程 序 员 只 需 简 单 地 把 各 条 语句 放 在 不 同 的 行 上 就 可 以 分 隔 它们 ， 如 下 所 示 : 


first statement 
second statement 


如 果 你 想 把 多 条 语句 放 在 同一 行 上 ， 就 必须 像 下 面 这 样 用 分 号 来 分 隔 开 它 们 : 
first statement; second statement; 
我 们 建议 在 每 条 语句 的 末尾 都 加 上 一 个 分 号 ， 这 是 一 种 良好 的 编程 习惯 : 


first statement; 
second statement; 


这 样 做 让 代码 更 容易 阅读 。 让 每 条 语句 独占 一 行 的 做 法 能 更 容易 跟踪 JavaScript 脚本 的 执行 
顺序 。 


2.2.2 注释 
不 是 所 有 的 语句 都 需要 JavaScript 解释 器 去 解释 并 执行 。 有 时 你 需要 在 脚本 中 写 一 些 仅 供 自 
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己 参 考 或 提醒 自己 的 信息 ， 你 希望 JavaScript 解释 器 能 直接 忽略 掉 这 些 信息 。 这 类 语句 就 是 注释 
(comment) 。 
注释 能 有 效 帮助 你 了 解 代码 流程 。 在 代码 中 它们 扮演 生活 中 便条 的 角色 ， 可 以 帮助 你 弄 清楚 
你 的 脚本 到 底 干 了 些 什么 。 
有 多 种 方式 可 以 在 JavaScript 脚本 中 插入 注释 。 例 如 ， 如 果 用 两 个 斜 线 作 为 一 行 的 开始 ， 这 
一 行 就 会 被 当成 一 条 注释 : 
// 自我 提醒 : 有 注释 是 好 事 
如 果 使 用 这 种 注释 方式 ， 就 必须 在 每 个 注释 行 的 开头 加 上 两 个 斜 线 。 像 下 面 这 样 的 写法 脚本 
就 会 出 问题 : 
// 自我 提醒 : 
有 注释 是 好 事 
必须 把 它们 写成 类 似 下 面 这 样 才 行 : 
// 自我 提醒 : 
// 有 注释 是 好 事 


如 果 打 算 注释 很 多 行 ， 你 可 以 在 注释 内 容 的 开头 加 上 一 个 斜 线 和 一 个 星 号 ( 久 )， 在 注释 内 
容 的 末尾 加 上 一 个 星 号 和 一 个 斜 线 (*/)。 下 面 是 一 个 多 行 注释 的 例子 : 


/* 自我 提醒 ;: 
有 注释 是 好 事 */ 


这 种 注释 方式 在 需要 插入 大 段 注释 时 很 有 用 ， 它 可 以 提高 整个 脚本 的 可 读 性 。 

还 可 以 使 用 HTML 风格 的 注释 ， 但 这 种 做 法 仅 适 用 于 单行 注释 。 其 实 JavaScript 解释 器 对 
“<!--” 的 处 理 与 对 “//” 的 处 理 是 一 样 的 : 

<!-- 这 是 JavaScript 中 的 注释 

如 果 是 在 HTML 文档 中 ， 还 需要 以 “- ->” 来 结束 注释 ， 如 下 所 示 ; 

<!-- 这 是 HTML 中 的 注释 --> 

但 JavaScript 不 要 求 这 样 做 ， 它 会 把 “-->” 视 为 注释 内 容 的 一 部 分 。 

请 注意 ，HTML 允许 上 面 这 样 的 注释 跨越 多 行 ， 但 JavaScript 要 求 这 种 注释 的 每 行 都 必须 在 
开头 加 上 “<!--” 来 作为 标志 。 

因为 JavaScript 解释 器 在 处 理 这 种 风格 的 注释 时 与 大 家 所 熟悉 的 HTML 做 法 不 同 , 为 避免 发 
生 混淆 ， 最 好 不 要 在 JavaScript 脚本 中 使 用 这 种 风格 的 注释 。 建 议 大 家 用 “/” 来 注释 单行 ， 用 
“/* ”注释 多 行 。 


2.2.3 变量 


wl 


在 日 常生 活 里 ， 有 些 东西 是 固定 不 变 的 ， 有 些 东 西 则 会 发 生变 化 。 例 如 ， 人 的 姓名 和 生日 是 
国定 不 变 的 ， 但 心情 和 年 龄 却 会 随 着 时 间 变 化 而 变化 。 人 们 把 那些 会 发 生变 化 的 东西 称 为 变量 


(variable) 。 
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我 的 心情 会 随 着 我 的 感受 变化 而 变化 。 假 设 我 有 一 个 变量 mood (意思 是 “心情 ”), 我 可 以 把 
此 时 此 刻 的 心情 存放 到 这 个 变量 中 。 不 管 这 个 变量 的 值 是 “happy” 还 是 “sad”， 它 的 名 字 始 终 
是 mood。 我 可 以 随时 改变 这 个 值 。 

类 似 地 ， 假 设 我 现在 的 年 龄 是 33 岁 。 一 年 之 后 ， 我 的 年 龄 就 是 34 岁 。 我 可 以 使 用 变量 age 
来 存放 我 的 年 龄 并 在 生日 那天 改变 这 个 值 。 当 我 现在 去 查看 age 变量 时 ， 它 的 值 是 33; 但 一 年 之 
后 ， 它 的 值 将 变 成 34。 

把 值 在 入 变量 的 操作 称 为 赋值 (assignment) 。 我 把 变量 mood 赋值 为 “happy”， 把 变量 age 
赋值 为 33。 

在 JavaScript 中 你 可 以 这 样 给 这 些 变量 赋值 : 


mood =“happy”; 
age = 33; 


一 个 变量 被 赋值 以 后 ， 我 们 就 说 该 变量 包含 这 个 值 。 变 量 mood 现在 包含 值 “happy”， 变 量 
age 现在 包含 值 33。 我 们 可 以 用 如 下 所 示 的 语句 把 这 两 个 变量 的 值 显 示 在 一 个 弹出 式 警 告 窗口 中 : 


alert(mood); 
alert(age); 


图 2-1 是 一 个 显示 mood 变量 值 的 例子 


G: 


图 2-1 


2-2 是 一 个 显示 age 变量 值 的 例子 。 


图 2-2 


我 们 会 在 本 书后 面 的 章节 中 利用 变量 做 一 些 很 有 用 的 事情 ， 别 着 急 。 
请 注意 ， | 这 设计 语言 
是 不 允许 的 ,有 很 多 语言 要 求 在 使 用 任何 变量 之 前 必须 先 对 它 做 出 “介绍 ”, 也 称 为 声明 (declare) 。 
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在 JavaScript 脚本 中 ， 如 果 程 序 员 在 对 某 个 变量 赋值 之 前 未 声明 ， 赋 值 操作 将 自动 声明 该 变 
量 。 虽 然 JavaScript 没有 强制 要 求 程 序 员 必须 提前 声明 变量 ， 但 提前 声明 变量 是 一 种 良好 的 编程 
习惯 。 下 面 的 语句 对 变量 mood 和 age 做 出 了 声明 : 


Var mood 
Var age; 


不 必 单 独 声明 每 个 变量 ， 你 也 可 以 用 一 条 语句 一 次 声明 多 个 变量 ， 
Var mood, age; 
你 甚至 可 以 一 石 两 鸟 : 把 声明 变量 和 对 该 变量 赋值 一 次 完成 


Var mood = “happy 
Var age = 33; 


甚至 还 可 以 像 下 面 这 样 : 
var mood = "happy", age = 33; 

像 上 面 这 样 声 明和 赋值 是 最 有 效率 的 做 法 ， 这 一 条 语句 的 效果 相当 于 下 面 这 些 语句 的 总 和 : 
Var mood, age; 


mood = “happy"; 
age = 33; 


在 JavaScript 语 言 里 ,变量 和 其 他 语法 元 素 的 名 字 都 是 区 分 字母 大 小 写 的 。 名 字 是 mood 的 变 
量 与 名 字 是 Mood、MO0D 或 m00d 的 变量 没有 任何 关系 ， 它 们 不 是 同一 个 变量 。 下 面 的 语句 是 在 对 
两 个 不 同 的 变量 进行 赋值 : 


var mood = "happy"; 
MOOD = "sad"; 


JavaScript 语法 不 允许 变量 名 中 包含 空格 或 标点 符号 (美元 符号 “$” 例 外 ) 。 下 面 这 条 语句 
将 导致 语法 错误 : 

var my mood = "happy"; 

JavaScript 变量 名 允许 包含 字母 、 数 字 、 美 元 符号 和 下 划 线 (但 第 一 个 字符 不 允许 是 数字 )。 
为 了 让 比较 长 的 变量 名 更 容易 阅读 ， 可 以 在 变量 名 中 的 适当 位 置 插入 下 划 线 ， 就 像 下 面 这 样 ， 

var my_mood = "happy"; 

另 一 种 方式 是 使 用 驼峰 格式 (camel case)， 删 除 中 间 的 空白 (下 划 线 )， 后 面 的 每 个 新 单词 
改 用 大 写字 母 开头 ， 

var myMood = "happy"; 
通常 驼峰 格式 是 函数 名 、 方 法 名 和 对 象 属性 名 命名 的 首选 格式 。 

在 上 面 这 条 语句 中 ,单词 “happy” 是 JavaScript 语 言 中 的 一 个 字面 量 (literal) ， 也 就 是 可 以 
直接 在 JavaScript 代码 中 写 出 来 的 数据 。 文 本 “happy” 除 了 表示 它 自 己 以 外 不 表示 任何 别 的 东西 ， 
正如 大 力 水 手 Popeye 的 名 言 :“ 它 就 是 它 !1” 与 此 形成 对 照 的 是 ， 单 词 “var” 是 一 个 关键 字 ， 


y_mood 是 一 个 变量 名 字 。 
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2.2.4 数据 类 型 


变量 mood 的 值 是 一 个 字符 囊 ， 变 量 age 的 值 则 是 一 个 数 。 虽 然 它们 是 两 种 不 同类 型 的 数据 ， 
但 在 JavaScript 中 对 这 两 个 变量 进行 声明 和 赋值 的 语法 却 完 全 一 样 。 有 些 其 他 的 语言 要 求 在 声明 
变量 的 同时 还 必须 同时 声明 变量 的 数据 类 型 ， 这 种 做 法 称 为 类 型 声明 (typing)。 

必须 明确 类 型 声明 的 语言 称 为 强 类 型 (strongly typed) 语言 。JavaScript 不 需要 进行 类 型 声 
明 ， 因 此 它 是 一 种 弱 类 型 (weakly typed) 语言 。 这 意味 着 程序 员 可 以 在 任何 阶段 改变 变量 的 数 
据 类 型 。 

以 下 语句 在 强 类 型 语言 中 是 非法 的 ， 但 在 JavaScript 里 却 完 全 没有 问题 : 


Var age = "thirty three”; 
age = 33; 


JavaScript 并 不 在 意 变量 age 的 值 是 一 个 字符 串 还 是 一 个 数 。 

接 下 来 ， 我 们 一 起 来 复习 一 下 JavaScript 中 最 重要 的 几 种 数据 类 型 。 

1. 字符 串 

字符 串 由 零 个 或 多 个 字符 构成 。 字 符 包 括 (但 不 限于 ) 字母 、 数 字 、 标 点 符号 和 空格 。 字 符 
串 必须 包 在 引号 里 ， 单 引号 或 双 引 号 都 可 以 。 下 面 这 两 条 语句 含义 完全 相同 : 


Var mood 
var mood 


happy ; 
happy ; 


你 可 以 随意 选用 引号 ， 但 最 好 是 根据 字符 串 所 包含 的 字符 来 选择 。 如 果 字 符 串 包含 双 引号 ， 
就 把 整个 字符 串 放 在 单 引 号 里 ， 如 果 字 符 串 包含 单 引 号 ， 就 把 整个 字符 串 放 在 双 引 号 里 : 

Var mood = "don't ask"; 

如 果 想 在 上 面 这 条 语句 中 使 用 单 引 号 ， 就 必须 保证 字母 “n” 和 “t” 之 间 的 单 引 号 能 被 当成 
这 个 字符 串 的 一 部 分 。 这 种 情况 下 这 个 单 引号 需要 被 看 做 一 个 普通 字符 , 而 不 是 这 个 字符 串 的 结 
束 标志 。 这 种 情况 我 们 需要 对 这 个 字符 进行 转 义 (escaping) 。 在 JavaScript 里 用 反 斜 线 对 字符 进 
行 转 义 : 

Var mood = 'don\'t ask ; 

类 似 地 ， 如 果 想 用 双 引 号 来 包 住 一 个 本 身 就 包含 双 引 号 的 字符 串 ， 就 必须 用 反 和 斜 线 对 字符 串 
中 的 双 引 号 进行 转 义 : 

var height = “about 5'10\" tal1”; 

实际 上 这 些 反 斜 线 并 不 是 字符 串 的 一 部 分 。 你 可 以 自己 去 验证 一 下 :; 把 下 面 这 段 代码 添加 到 
你 的 example.js 文件 中 ， 然 后 重新 加 载 test.html 文件 。 


var height = "about 5'10\" tall’; 
alert(height); 


2-3 是 用 反 斜 线 对 有 关 字 符 转 义 的 一 个 屏幕 输出 示例 。 
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(3 about S10" rall 


大 一 OK 一 


图 2-3 


我 个 人 比较 喜欢 用 双 引 号 来 包 住 字符 串 。 作 为 一 个 好 的 编程 习惯 ,不 管 选择 用 双 引 号 还 是 单 
引号 , 请 在 整个 脚本 中 保持 一 致 。 如 果 在 同一 个 脚本 中 一 会 儿 使 用 双 引 号 , 一 会 儿 又 使 用 单 引 号 ， 
代码 很 快 就 会 变 得 难以 阅读 和 理解 。 

2. 数值 

如 果 想 给 一 个 变量 赋 一 个 数值 ， 不 用 限定 它 必须 是 一 个 整数 。JavaScript 允许 使 用 带 小 数 点 
的 数值 ， 并 且 人 允许 任意 位 小 数 ， 这 样 的 数 称 为 浮 点 数 (floating-point number) : 


Var age = 33.25; 


也 可 以 使 用 负数 。 在 有 关 数 值 的 前 面 加 上 一 个 减 号 (-) 表示 它 是 一 个 负数 : 


var temperature = -20; 


JavaScript 也 支持 负数 浮 点 数 ; 

var temperature = -20.33333333 

以 上 是 数值 数据 类 型 的 例子 。 

3. 布尔 值 

另 一 种 重要 的 数据 类 型 是 布尔 (boolean) 类 型 。 

布尔 数据 只 有 两 个 可 选 值 一 一 true 或 false。 假 设 需要 这 样 一 个 变量 : 如 果 我 正在 睡觉 ， 这 
个 变量 将 存储 一 个 值 ， 如 果 我 没有 睡觉 这 个 变量 将 存储 男 一 个 值 。 可 以 用 字符 串 数 据 类 型 把 变 
量 赋值 为 “sleeping” 或 “not sleeping”， 但 使 用 布尔 数据 类 型 显然 是 一 个 更 好 的 选择 ; 


var sleeping = true; 


从 某 种 意义 上 讲 ， 为 计算 机 设计 程序 就 是 与 布尔 值 打交道 。 作 为 最 基本 的 事实 ， 所 有 的 电子 
电路 只 能 识别 和 使 用 布尔 数据 : 电路 中 有 电流 或 是 没有 电流 。 不 管 是 使 用 术语 true 和 false、 yes 和 
no 或 者 1 和 0， 重 要 的 是 只 能 取 两 种 可 取 值 中 的 一 种 。 

布尔 值 不 是 字符 串 ， 千 万 不 要 把 布尔 值 用 引号 括 起 来 。 布 尔 值 false 与 字符 串 值 "false" 是 
两 码 事 ! 

下 面 这 条 语句 将 把 变量 married 设置 为 布尔 值 true: 


var married = true; 


下 面 这 条 语句 把 变量 married 设置 为 字符 串 "true": 
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Var married = "true"; 


2.2.5 ”数组 


字符 串 、 数 值 和 布尔 值 都 是 标量 (scalar)。 如 果 某 个 变量 是 标量 ， 它 在 任意 时 刻 就 只 能 有 一 
个 值 。 如 果 想 用 一 个 变量 来 存储 一 组 值 ， 就 需要 使 用 数组 (array) 。 

数组 是 指 用 一 个 变量 表示 一 个 值 的 集合 ， 集 合 中 的 每 个 值 都 是 这 个 数组 的 一 个 元 素 
(element) 。 例 如 ， 我 们 可 以 用 名 为 beatles 的 变量 来 保存 Beatles 乐队 全 体 四 位 成 员 的 姓名 。 
在 JavaScript 中 ， 数 组 可 以 用 关键 字 Array 声明 。 声 明 数 组 的 同时 还 可 以 指定 数组 初始 元 素 
个 数 ， 也 就 是 这 个 数组 的 长 度 (length): 

var beatles = Array(4); 

有 时 ， 我 们 无 法 预知 某 个 数组 有 多 少 个 元 素 。 没 有 关系 ，JavaScript 根本 不 要 求 在 声明 数组 
时 必须 给 出 元 素 个 数 ， 我 们 完全 可 以 在 声明 数组 时 不 给 出 元 素 个 数 : 

var beatles = Array(); 

向 数组 中 添加 元 素 的 操作 称 为 填充 (populating)。 在 填充 数组 时 , 不 仅 需 要 给 出 新 元 素 的 值 ， 
还 需要 给 出 新 元 素 在 数组 中 的 存放 位 置 ， 这 个 位 置 就 是 这 个 元 素 的 下 标 (index)。 数 组 里 一 个 元 
素 配 有 一 个 下 标 。 下 标 必 须 用 方 括 号 括 起 来 : 

array[index] = element; 


现在 来 填充 刚才 声明 的 beatles 数组 , 我 们 按照 Beatles 乐队 成 员 的 传统 顺序 ( 即 John、 Paul、 
George 和 Ringo) 进行 填充 。 第 一 个 : 


beatles[0] = "John"; 


用 0 而 不 是 1 作为 第 一 个 下 标 多 少 会 让 人 感到 有 些 不 习惯 ， 这 是 JavaScript 世界 里 的 一 条 规 
则 ， 所 以 我 们 只 能 这 么 做 。 人 们 很 容易 忘记 这 一 点 , 很 多 程序 员 新 手 在 刚 接触 数组 时 经 常 在 这 个 
问题 上 犯错 误 。 

下 面 是 声明 和 填充 beatles 数组 的 全 过 程 : 


var beatles = Array(4); 


beatles[0] = "John"; 
beatles[1] = "Paul"; 
beatles[2] = "George"; 
beatles[3] = "Ringo"; 


我 们 现在 可 以 在 脚本 中 通过 下 标 值 “2”(beaties[2]) 来 获取 元 素 “George” 了 。 请 注意 ， 
beaties 数组 的 长 度 是 4， 但 它 最 后 一 个 元 素 的 下 标 却 是 3。 因 为 数组 下 标 是 从 0 开始 计数 的 ， 你 
或 许 需要 一 些 时 间 才能 习惯 这 一 事实 。 

像 上 面 这 样 填充 数组 未 免 有 些 麻烦 。 有 一 种 相对 简单 的 方式 在 声明 数组 的 同时 对 它 进 行 填 
充 。 这 种 方式 要 求 用 逗号 把 各 个 元 素 隔 开 : 


var beatles = Array( "John", "Paul", "George", "Ringo™ ); 
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上 面 这 条 语句 会 为 每 个 元 素 自动 分 配 一 个 下 标 : 第 一 个 下 标 是 0， 第 二 个 是 1， 依 次 类 推 。 
因此 ，beatles[2] 仍 将 对 应 于 取 值 为 “George” 的 元 素 。 

我 们 甚至 用 不 着 明确 地 表明 我 们 是 在 创建 数组 。 事 实 上 ， 只 需 用 一 对 方 括号 把 各 个 元 素 的 初 
始 值 括 起 来 就 可 以 了 : 

var beatles = [ "John", "Paul", "George"， "Ringo”]; 

数组 元 素 不 必 非 得 是 字符 串 。 可 以 把 一 些 布尔 值 存 和 人 一 个 数组 , 还 可 以 把 一 组 数值 存 入 一 个 
数组 : 

var years = [ 1940, 1941, 1942, 1943 ]; 

甚至 可 以 把 这 3 种 数据 类 型 混在 一 起 存 入 一 个 数组 : 

Var lennon = [ "John", 1940, false ]; 

数组 元 素 还 可 以 是 变量 : 


var name = "John"; 
beatles[0] = name; 


这 将 把 beatles 数组 的 第 一 个 元 素 赋值 为 “John”。 
数组 元 素 的 值 还 可 以 是 另 一 个 数组 的 元 素 。 下 面 两 条 语句 将 把 beatles 数组 的 第 二 个 元 素 赋 
值 为 “Paul”: 


var names = [ "Ringo”, "John", "George", "Paul”]; 
beatles[1] = names[3]; 


事实 上 , 数组 还 可 以 包含 其 他 的 数组 ! 数 组 中 的 任何 一 个 元 素 都 可 以 把 一 个 数组 作为 它 的 值 : 


var lennon = [ "John", 1940, false ]; 
var beatles = []; 
beatles[0] = lennon; 


现在 ，beatles 数组 的 第 一 个 元 素 的 值 是 另外 一 个 数组 。 要 想 获得 那个 数组 里 的 某 个 元 素 的 
值 ,需要 使 用 更 多 的 方 括 号 ,beatles[0][0] 的 值 是 “John”, beatles[0][1] 的 值 是 1940,beatles[0][2] 
的 值 是 false。 

这 是 一 种 功能 相当 强大 的 存储 和 获取 信息 的 方式 ,但 如 果 不 得 不 记 住 每 个 下 标 数字 的 话 ( 尤 
其 是 需要 从 零 开 始 数 的 时 候 ) ， 编 程 工 作 将 是 一 种 非常 痛苦 和 麻烦 的 体验 。 幸 好 还 有 几 种 办 法 可 
以 填充 数组 。 首 先 看 看 一 种 更 可 读 的 填充 数组 的 方式 ， 然 后 介绍 存放 数据 的 首选 方式 : 将 数据 保 
存 为 对 象 。 

关联 数组 

beatles 数组 是 传统 数组 的 典型 例子 : 每 个 元 素 的 下 标 是 一 个 数字 ， 每 增加 一 个 元 素 ， 这 个 
数字 就 依次 增加 1。 第 一 个 元 素 的 下 标 是 0， 第 二 个 元 素 的 下 标 是 1， 依 次 类 推 。 

如 果 在 填充 数组 时 只 给 出 了 元 素 的 值 , 这 个 数组 就 将 是 一 个 传统 数组 ， 它 的 各 个 元 素 的 下 标 
将 被 自动 创建 和 刷新 。 

可 以 通过 在 填充 数组 时 为 每 个 新 元 素 明 确 地 给 出 下 标 来 改变 这 种 默认 的 行为 。 在 为 新 元 素 给 
出 下 标 时 ， 不必 局 限于 使 用 整数 数字 。 你 可 以 用 字符 串 : 
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var lennon = Array(); 
lennon["name"|] = "John"; 
lennon[ "year"] = 1940; 
lennon["living”] = false; 


这 样 的 数组 叫做 关联 数组 。 由 于 可 以 使 用 字符 串 来 代替 数字 值 ， 因 而 代码 更 具有 可 读 性 。 但 
是 ， 这 种 用 法 并 不 是 一 个 好 习惯 ， 不 推荐 大 家 使 用 。 本 质 上 ， 在 创建 关联 数组 时 ， 你 创建 的 是 
Array 对 象 的 属性 。 在 JavaScript 中 ,所 有 的 变量 实际 上 都 是 某 种 类 型 的 对 象 。 比 如 ， 一 个 布尔 值 
就 是 一 个 Boolean 类 型 的 对 象 ， 一 个 数组 就 是 一 个 Array 类 型 的 对 象 。 在 上 面 这 个 例子 中 ， 你 实 
际 上 是 给 lennon 数组 添加 了 name、year 和 1iving 三 个 属性 。 理 想 情况 下 ， 你 不 应 该 修改 Array 
对 象 的 属性 ， 而 应 该 使 用 通用 的 对 象 (0bject ) 。 


2.2.6 对象 


与 数组 类 似 , 对 象 也 是 使 用 一 个 名 字 表 示 一 组 值 。 对 象 的 每 个 值 都 是 对 象 的 一 个 属性 。 例如 ， 
前 一 节 的 lennon 数组 也 可 以 创建 成 下 面 这 个 对 象 : 

var lennon = Object(); 

lennon.name = "John"; 


lennon.year = 1940; 
lennon.living = false; 


与 使 用 Array 类 似 ， 创 建 对 象 使 用 0bject 关键 字 。 它 不 使 用 方 括号 和 下 标 来 获取 元 素 ， 而 是 
像 任 何 JavaScript 对 象 一 样 ， 使 用 点 号 来 获取 属性 。 要 了 解 与 Object 有 关 的 更 多 内 容 ， 请 参考 本 
章 2.7 市 。 

创建 对 象 还 有 一 种 更 简洁 的 语法 ， 即 花 括号 语法 : 

{ propertyName:value, propertyName:value } 

比如 ，1lennon 对 象 也 可 以 写成 下 面 这 样 : 

var lennon = { name:"John", year:1940, living:false }; 

属性 名 与 JavaScript 变量 的 命名 规则 有 相同 之 处 ， 属 性 值 可 以 是 任何 JavaScript 值 ， 包 括 其 他 
对 象 。 

用 对 象 来 代替 传统 数组 的 做 法 意味 着 可 以 通过 元 素 的 名 字 而 不 是 下 标 数字 来 引用 它们 。 这 大 
大 提高 了 脚本 的 可 读 性 。 

下 面 ,我 们 将 创建 一 个 新 的 beatles 数组 ,并 用 刚才 创建 的 lennon 对 象 来 填充 它 的 第 一 个 元 素 。 


var beatles = Array(); 
beatles[0] = lennon; 


现在 ,不 需要 使 用 那么 多 数 就 可 以 获得 想 要 的 元 素 。 我 们 不 能 使 用 beatles[0][0] 而 是 使 用 
beatles[0] .name 得 到 值 “John”。 
在 此 基础 上 ， 还 可 以 做 进一步 的 改进 : 把 beatles 数组 也 声明 为 对 象 而 不 是 传统 数组 。 这 样 
一 来 ， 我 们 就 可 以 用 “drummer” 或 “bassist” 等 更 有 意义 且 更 容易 记忆 的 字符 串 值 而 不 是 
一 些 枯燥 乏味 的 整数 一 一 作为 下 标 去 访问 这 个 数组 里 的 元 素 了 : 


var beatles = {}; 
beatles.vocalist = lennon; 
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现在 ，beatles.vocalist.name 的 值 是 
vocalist.1iving 的 值 是 false。 


2.3 操作 


“John”，beatles.vocalist.year 的 值 是 1940，beatles. 


此 前 给 出 的 示例 都 非常 简单 ， 只 是 凶 
有 用 的 工作 ， 还 需要 能 够 进行 计算 和 处 到 


算术 操作 符 


上 建 了 一 些 不 同类 型 的 变量 而 已 。 要 用 JavaScript 做 一 些 
数据 。 也 就 是 需要 完成 一 些 操作 (operation) 。 


加 法 是 一 种 操作 ， 减 法 、 除 法 和 乘法 也 是 。 这 些 算术 操作 (arithmetic operation) 中 的 每 一 


种 都 必须 借助 于 相应 的 操作 符 (operator 


) 才能 完成 。 操 作 符 是 JavaScript 为 完成 各 种 操作 而 定 


义 的 一 些 符 号 。 你 其 实 已 经 见 过 一 种 操作 符 了 ， 它 就 是 刚才 在 进行 赋值 时 使 用 的 等 号 (=)。 加 
法 操作 符 是 加 号 (+), 减法 操作 符 是 减 号 (-), 除法 操作 符 是 斜 杠 (/) ,乘法 操作 符 是 星 号 (*)。 


下 面 是 一 个 简单 的 加 法 操作 : 


1+4 
还 可 以 把 多 种 操作 组 合 在 一 起 : 
1+4*5 


为 避免 产生 歧义 ， 可 以 用 括号 把 不 同 的 操作 分 隔 开 来 : 


1+ (4*5) 
(1+ 4) *5 


变量 可 以 包含 操作 : 
var total = (1+ 4) * 5; 
不 仅 如 此 ， 还 可 以 对 变量 进行 操作 : 


var temp fahrenheit = 95; 


var temp_celsius = (temp_fahrenheit - 32) / 1.8; 


JavaScript 还 提供 了 一 些 非常 有 用 的 


操作 符 ， 可 将 其 作为 各 种 常用 操作 的 缩写 。 例 如 ， 如 果 


想 给 一 个 数值 变量 加 上 1， 可 以 使 用 如 下 所 示 的 语句 : 


year = year + 1; 


也 可 以 使 用 + 操作 符 来 达到 同样 的 目的 : 


yeaIT++j 


类 似 地 ，- -操作 符 将 对 一 个 数值 变量 的 值 进行 减 1 操作 。 


加 号 (+) 是 一 个 比较 特殊 的 操作 符 
串 合 二 为 一 是 一 种 很 直观 易 懂 的 操作 : 


， 它 既 可 以 用 于 数值 ， 也 可 以 用 于 字符 串 。 把 两 个 字符 


var message = "I am feeling " + "happy"; 


像 这 样 把 多 个 字符 串 首尾 相连 在 一 起 的 操作 叫做 拼接 (concatenation)。 这 种 拼接 也 可 以 通过 


变量 来 完成 ， 


20 第 2 章 JavaScript 语法 


var mood = "happy"; 
Var message = "I am feeling ”+ mood; 


甚至 可 以 把 数值 和 字符 串 拼 接 在 一 起 。 因 为 JavaScript 是 一 种 弱 类 型 语言 ， 所 以 这 种 操作 是 
允许 的 。 此 时 ， 数 值 将 被 自动 转换 为 字符 串 : 


Var year = 2005; 
var message = "The year is ”+ year; 


请 记 住 ， 如 果 把 字符 串 和 数值 拼接 在 一 起 ， 其 结果 将 是 一 个 更 长 的 字符 串 ; 但 如 果 用 同样 的 
操作 符 来 “拼接 ”两 个 数值 ， 其 结果 将 是 那 两 个 数值 的 算术 和 。 请 对 比 下 面 两 条 alert 语句 的 执 
行 结果 : 


alert ("10" + 20); 
alert (10 + 20); 


第 一 条 alert 语句 将 返回 字符 串 "1020"， 第 二 条 alert 语句 将 返回 数值 30。 
图 2-4 是 对 字符 串 "10" 和 数值 20 进行 拼接 的 结果 。 


男 一 个 非常 有 用 的 快捷 操作 符 是 二 ， 它 可 以 一 次 完成 “加 法 和 赋值 ”( 或 “拼接 和 赋值 ”) 操 
作 : 


Var year = 2010; 
var message = "The year is "; 
message += year; 


执行 完 上 面 这 些 语句 后 , 变量 message 的 值 将 是 “The year is 2010”。 可 以 用 如 下 所 示 的 alert 
对 话 框 来 验证 这 一 结果 : 


alert(message); 
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这 次 对 字符 串 和 数值 进行 拼接 操作 的 结果 如 图 2-6 所 示 。 


The year is 2010 
/i 


2.4 条件 语句 


此 前 介绍 的 语句 都 是 相对 比较 简单 的 声明 或 运算 , 而 脚本 的 真正 威力 体现 在 它们 还 可 以 根据 
人 们 给 出 的 各 种 条 件 做 出 决策 。JavaScript 使 用 条 件 语 句 (conditional statement) 来 做 判断 。 

在 解释 脚本 时 , 浏览 器 将 依次 执行 这 个 脚本 中 的 各 条 语句 , 我 们 可 以 在 这 个 脚本 中 用 条 件 语 
句 来 设置 一 个 条 件 ， 只 有 满足 了 这 一 条 件 才 能 让 更 多 的 语句 得 到 执行 。 最 常见 的 条 件 语 句 是 if 
语句 ， 下 面 是 计 语 名 的 基本 语法 : 


if (condition) { 
statements; 


条 件 必 须 放 在 if 后 面 的 圆 括 号 中 。 条 件 的 求 值 结 果 永远 是 一 个 布尔 值 ， 即 只 能 是 true 或 
false。 花 括号 中 的 语句 一 一 不 管 它们 有 多 少 条 ， 只 有 在 给 定 条 件 的 求 值 结果 是 true 的 情况 下 才 
会 执行 。 因 此 ， 在 下 面 这 个 例子 中 ，alert 消息 永远 也 不 会 出 现 : 


if (1 > 2) { 
alert("The world has gone mad!"); 


因为 1 不 可 能 大 于 2， 所 以 上 面 这 个 条 件 的 值 永远 是 false。 

在 这 条 计 语 句 中 , 我 们 有 意 把 所 有 的 东西 都 放 在 花 括号 里 的 。 这 并 不 是 JavaScript 的 一 项 语 
法 要 求 ， 我 们 这 么 做 只 是 为 了 让 代码 更 容易 阅读 。 
事实 上 ，if 语句 中 的 花 插 号 本 身 并 不 是 必 不 可 少 的 。 如 果 if 语句 中 的 花 插 号 部 分 只 包含 着 
一 条 语句 的 话 ， 那 就 可 以 不 使 用 花 括号 ， 而 且 这 条 if 语句 的 全 部 内 容 可 以 写 在 同一 行 上 : 

if (1 > 2) alert("The world has gone mad!"); 

不 过 ， 因 为 花 括 号 可 以 提高 脚本 的 可 读 性 ， 所 以 在 if 语句 中 总 是 使 用 花 括号 是 个 好 习惯 。 

谎 语句 可 以 有 一 个 else 子 句 。 包 含 在 else 子 句 中 的 语句 会 在 给 定 条 件 为 假 时 执行 : 


if (1 > 2) { 
alert("The world has gone mad!"); 
} else { 


alert("All is well with the world"); 


因为 给 定 条 件 “1>2” 的 值 为 假 (false》 ， 所 以 我 们 将 看 到 如 图 2-7 所 示 的 结果 。 
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All is vell with rhe waorld 


人 一 OK 一 人 


2.4.1 比较 操作 符 


JavaScript 还 提供 了 许多 几乎 只 能 用 在 条 件 语 句 里 的 操作 符 ， 其 中 包括 诸如 大 于 (>)、 小 于 
(<)、 大 于 或 等 于 (>=)、 小 于 或 等 于 (<=) 之 类 的 比较 操作 符 。 

如 果 想 比较 两 个 值 是 否 相 等 ， 可 以 使 用 “等 于 ”比较 操作 符 。 这 个 操作 符 由 两 个 等 号 构成 
一 ) 。 别 忘 了 ， 单 个 等 号 (=) 是 用 于 完成 赋值 操作 的 。 如 果 在 条 件 语句 的 某 个 条 件 里 使 用 了 单 
个 等 号 ， 那 么 只 要 相应 的 赋值 操作 取得 成 功 ， 那 个 条 件 的 求 值 结 果 就 将 是 true。 

下 面 是 一 个 错误 地 进行 “等 于 ”比较 的 例子 : 


var my_mood = “happy"; 

Var your mood = “Sad ; 

if (my mood = your mood) { 
alert("We both feel the same."); 


上 面 这 条 语句 的 错误 之 处 在 于 ， 它 是 把 变量 your_mood 赋值 给 变量 my_mood， 而 不 是 在 比较 它 
们 是 否 相 等 。 因 为 这 个 赋值 操作 总 会 成 功 ”， 所 以 这 个 条 件 语 句 的 结果 将 永远 是 true。 
下 面 才 是 进行 “等 于 ”比较 的 正确 做 法 : 


var my mood = “happy"; 

Var your mood = "sad"; 

if (my mood == your mood) { 
alert("We both feel the same."); 


这 次 ， 条 件 语句 的 结果 是 false。 
JavaScript 还 提供 了 一 个 用 来 进行 “不 等 于 ”比较 的 操作 符 ， 它 由 一 个 感叹 号 和 一 个 等 号 构 
成 (!=)。 


if (my_mood != your mood) { 
alert("We're feeling different moods."); 


相等 操作 符 == 并 不 表示 严格 相等 ， 这 一 点 很 容易 让 人 犯 糊涂 。 例 如 ， 比 较 false 与 一 个 空 字 
符 串 会 得 到 什么 结果 ? 


var a = false; 
var b = ""; 
if (a == b) { 


@ 此 处 原文 有 误 ， 赋 值 运算 并 非 总 是 返回 真 值 : ifla = false) {alert('hello, wor1d');} 中 的 alert 语句 就 不 会 执行 。 
审 校 者 注 
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alert("a equals b"); 


这 个 条 件 语句 的 求 值 结果 是 true, 为 什么 ? 因为 相等 操作 符 一 认为 空 字符 串 与 false 的 含义 
相同 。 要 进行 严格 比较 ， 就 要 使 用 男 一 种 等 号 (===)。 这 个 全 等 操作 符 会 执行 严格 的 比较 ， 不 
仅 比 较 值 ， 而 且 会 比较 变量 的 类 型 ; 


var a = false; 

var b = ""; 

if (a === b) { 
alert("a equals b"); 


这 一 次 ， 条 件 表 达 式 的 求 值 结果 就 是 false 了 。 因 为 即使 可 以 认为 false 与 空 字 符 串 具有 相 
同 的 含义 ， 但 Boolean 和 String 可 不 是 一 种 类 型 。 
当然 ， 对 于 不 等 操作 符 != 也 是 如 此 。 如 果 想 比较 严格 不 相等 ， 就 要 使 用 !==。 


2.4.2 逻辑 操作 符 


JavaScript 允许 把 条 件 语句 里 的 操作 组 合 在 一 起 。 例 如 ， 如 果 想 检查 某 个 变量 ， 不 妨 假设 这 
个 变量 的 名 字 是 num， 它 的 值 是 不 是 在 5~10 之 间 ， 我 将 需要 进行 两 次 比较 操作 。 首 先 ， 比 较 这 
个 变量 是 否 大 于 或 等 于 5; 然后， 比较 这 个 变量 是 否 小 于 或 等 于 10。 这 两 次 比较 操作 称 为 逻辑 比 
较 (operand) 。 下面 是 把 这 两 个 逻辑 比较 组 合 在 一 起 的 具体 做 法 : 


if ( num >= 5 && num <= 10 ) { 


alert("The number is in the right range."); 


这 里 使 用 了 “逻辑 与 ”操作 符 ， 它 由 两 个 “人 ”字符 构成 〈(&&) ， 是 一 个 逻辑 操作 符 。 

逻辑 操作 符 的 操作 对 象 是 布尔 值 。 每 个 逻辑 操作 数 返回 一 个 布尔 值 true 或 者 是 false。 逻 
辑 与 ”操作 只 有 在 它 的 两 个 操作 数 都 是 true 时 才 会 是 true。 

“逻辑 或 ”操作 符 由 两 个 型 直 线 字符 构成 (|) 。 只 要 它 的 操作 数 中 有 一 个 是 true,“ 逻 辑 或 ” 
操作 就 将 是 true。 如 果 它 的 两 个 操作 数 都 是 true,“ 逻 辑 或 ”操作 也 将 是 true。 只 有 当 它 的 两 个 
操作 数 都 是 false 时 ,“ 逻 辑 或 ”操作 才 会 是 false。 


if (num > 10 || num<5)1{ 
alert("The number is not in the right range."); 


JavaScript 还 提供 了 一 个 “逻辑 非 ” 操 作 符 ， 它 由 一 个 感叹 号 〈!) 单独 构成 。“ 逻 辑 非 ” 操 
作 符 只 能 作用 于 单个 逻辑 操作 数 ， 其 结果 是 把 那个 逻辑 操作 数 所 返回 的 布尔 值 取 反 。 如 果 那 个 逻 
辑 操作 数 所 返回 的 布尔 值 是 true,“ 逻 辑 非 ” 操 作 符 将 把 它 取 反 为 false: 


if ( !(1 > 2) 
alert("All is well with the world"); 


请 注意 , 为 避免 产生 卜 义 ， 上面 这 条 语句 把 逻辑 操作 数 放 在 了 括号 里 ,因为 我 想 让 “逻辑 非 ” 
操作 符 作 用 于 括号 里 的 所 有 内 容 。 
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可 以 用 “逻辑 非 ” 操 作 符 把 整个 条 件 语句 的 结果 颠倒 过 来 。 在 下 面 的 例子 里 ,我 特意 使 用 了 
一 对 括号 来 确保 “逻辑 非 ” 操 作 符 将 作用 于 两 个 逻辑 操作 数 的 组 合 结果 : 


if ( I(num > 10 || num < 5) ) { 
alert("The number IS in the right range.”); 


2.5 ”循环 语句 


讶 语句 或 许 是 最 重要 、 最 有 用 的 条 件 语 名 了 ， 它 的 唯一 不 足 是 无 法 完成 重复 性 的 操作 。 在 if 
语句 里 , 包含 在 花 括 号 里 的 代码 块 只 能 执行 一 次 。 如 果 需 要 多 次 执行 同一 个 代码 块 ， 就 必须 使 用 
循环 语句 。 

循环 语句 可 以 让 我 们 反复 多 次 地 执行 同一 段 代码 。 循 环 语句 分 为 几 种 不 同 的 类 型 , 但 它们 的 
工作 原理 几乎 一 样 :只 要 给 定 条 件 仍 能 得 到 满足 , 包含 在 循环 语句 里 的 代码 就 将 重复 地 执行 下 去 ，; 
一 旦 给 定 条 件 的 求 值 结果 不 再 是 true， 循 环 也 就 到 此 为 止 。 


2.5.1 while 循环 
while 循环 与 if 语句 非常 相似 ， 它 们 的 语法 几乎 完全 一 样 : 


while (condition) { 
statements; 


while 循环 与 if 语句 唯一 的 区 别 是 ， 只 要 给 定 条 件 的 求 值 结果 是 true， 包 含 在 花 括 号 里 的 代 
码 就 将 反复 地 执行 下 去 。 下 面 是 一 个 while 循环 的 例子 : 


var count = 1; 

while (count < 11) { 
alert (count); 
Count++; 


我 们 来 仔细 分 析 一 下 上 面 这 段 代 码 。 首 先 ， 创 建 数值 变量 count 并 赋值 为 1; 然后， 以 count 
<11 一 一 意思 是 “只 要 变量 count 的 值 小 于 11， 就 重复 执行 这 个 循环 ” 为 条 件 创建 一 个 while 
循环 。 在 while 循环 的 内 部 ， 用 “++” 操 作 符 对 变量 count 的 值 执行 加 1 操作 ， 而 这 一 操作 将 重 
复 执 行 10 次 。 如 果 用 Web 浏览 器 来 观察 这 段 代码 的 执行 情况 ， 将 会 看 到 一 个 alert 对 话 框 内 现 
了 10 次 。 这 条 循环 语句 执行 完毕 后 ， 变 量 count 的 值 将 是 11。 


注意 这 里 的 关键 是 在 while 循环 的 内 部 必须 发 生 一 些 会 影响 循环 控制 条 件 的 事情 。 在 上 例 中 ， 
我 们 在 while 循环 的 内 部 对 变量 count 的 值 进行 了 加 ] 操作 ， 而 这 将 时 致 循环 控制 条 件 在 
经 过 10 次 循环 后 的 求 值 结果 变 成 false。 如 果 我 们 不 增加 变量 count 的 值 ， 这 个 while 循 
环 将 永远 执行 下 去 。 


do.. .while 循 环 
类 似 于 if 语句 的 情况 ，while 循环 的 花 括号 部 分 所 包含 的 语句 有 可 能 不 被 执行 ， 因 为 对 循环 
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~» 


控制 条 件 的 求 值 发 生 在 每 次 循环 开始 之 前 ， 所 以 如 果 循 环 控制 条 件 的 首次 求 值 结果 是 false， 那 
些 代 码 将 一 次 也 不 会 被 执行 。 

在 某 些 场合 ,我 们 希望 那些 包含 在 循环 语句 内 部 的 代码 至 少 执行 一 次 。 这 时 ，do 循环 是 我 们 
的 最 佳 选择 。 下 面 是 do 循环 的 语法 : 


dof 
statements; 
} while (condition); 


这 与 刚才 介绍 的 while 循环 非常 相似 ， 但 有 个 显而易见 的 区 别 : 对 循环 控制 条 件 的 求 值 发 生 
在 每 次 循环 结束 之 后 。 因 此 ， 即 使 循环 控制 条 件 的 首次 求 值 结果 是 false， 包 含 在 花 括 号 里 的 语 
句 也 至 少 会 被 执行 一 次 。 

我 们 可 以 把 前 一 小 节 里 的 while 循环 改写 为 如 下 所 示 的 do.. .while 循环 : 


var count = 1; 

do { 
alert (count); 
Count++; 

} while (count < 11); 


这 段 代码 的 执行 结果 与 while 循环 完全 一 样 : alert 消息 将 闪现 10 次 ; 在 循环 结束 后 ， 变 量 
count 的 值 将 是 11。 
再 来 看 看 下 面 这 个 变 体 : 


var count = 1; 


0 
alert (count); 
Count++; 

} while (count < 1); 


在 上 面 这 个 do 循环 里 ， 循 环 控制 条 件 的 求 值 结 果 永远 不 为 true: 变量 count 的 初始 值 是 1， 
所 以 它 在 这 里 永远 不 会 小 于 1。 可是, 因为 do 循环 的 循环 控制 条 件 出 现在 花 括 号 部 分 之 后 ,所 以 
包含 在 这 个 do 循环 内 部 的 代码 还 是 执行 了 一 次 。 也 就 是 说 ， 仍 将 看 到 一 条 alert 消息 。 这些 语句 
执行 完毕 后 ， 变 量 count 的 值 将 是 2， 尽 管 循环 控制 条 件 的 求 值 结果 是 false。 


2.5.2 for 循环 


用 for 循环 来 重复 执行 一 些 代码 也 很 方便 ， 它 类 似 于 while 循环 。 事 实 上 ，for 循环 只 是 刚才 
介绍 的 while 循环 的 一 种 变 体 。 如 果 仔 细 观 察 上 一 小 市 里 的 while 循环 的 例子 ， 就 会 发 现 它们 都 
可 以 改写 为 如 下 所 示 的 样子 : 

initialize; 

while (condition) { 


statements; 
increment; 


而 for 循环 不 过 是 进一步 改写 为 如 下 所 示 的 紧凑 形式 而 已 : 


for (initial condition; test condition alter condition) { 
statements; 
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用 for 循环 来 重复 执行 一 些 代码 的 好 处 是 循环 控制 结构 更 加 清晰 。 与 循环 有 关 的 所 有 内 容 都 
包含 在 for 语句 的 圆 括 号 部 分 。 
可 以 把 上 一 小 闻 里 的 例子 改写 为 如 下 所 示 的 for 循环 : 


for (var count = 1; count «< 11; Count++ ) { 
alert (count); 


与 循环 有 关 的 所 有 内 容 都 包含 在 for 语句 的 圆 括号 里 。 现 在 ， 当 我 们 把 一 些 代 码 放 在 花 括号 
中 间 的 时 候 ， 我 们 清楚 地 知道 那些 代码 将 被 执行 10 次 。 

for 循环 最 常见 的 用 途 之 一 是 对 某 个 数组 里 的 全 体 元 素 进 行 遍 历 处 理 。 这 往往 需要 用 到 数组 
的 array.1length 属性 ， 这 个 属性 可 以 告诉 我 们 在 给 定数 组 里 的 元 素 的 个 数 。 一 定 要 记 住 数 组 下 标 
从 0 而 不 是 1 开始。 下 面 的 例子 中 ， 数 组 有 4 个 元 素 。count 变量 对 于 数组 中 每 个 元 素 都 是 从 0 
开始 按 1 递增 。 数 到 4 时 ， 测 试 条 件 失败 ， 循 环 终止 ，3 是 从 数组 中 检索 到 的 最 后 一 个 下 标 。 


var beatles = Array("John","Paul","George","Ringo" ); 

for (var Count = 0 ; count < beatles.length; count++ ) { 
alert(beatles[count]); 

} 


运行 这 段 代码 ， 将 看 到 4 条 alert 消息 ， 它 们 分 别 对 应 着 Beatles 乐队 的 四 位 成 员 。 
2.6 函数 


如 果 需 要 多 次 使 用 同一 段 代 码 ， 可 以 把 它们 封装 成 一 个 国 数 。 函 数 (function) 就 是 一 组 允 
许 在 你 的 代码 里 随时 调用 的 语句 。 每 个 函数 实际 上 是 一 个 短小 的 脚本 。 

作为 一 种 良好 的 编程 习惯 ， 应 该 先 对 函数 做 出 定义 再 调用 它们 。 

下 面 是 一 个 简单 的 示例 函数 : 

function shout() { 

var beatles = Array("John","Paul","George","Ringo" ); 

for (var count = 0 ; count < beatles.length; count++ ) { 

alert(beatles[count]); 


} 

这 个 函数 里 的 循环 语句 将 依次 弹出 对 话 框 来 显示 Beatles 乐队 成 员 的 名 字 。 现 在 ， 如 果 想 在 
自己 的 脚本 里 执行 这 一 动作 ， 可 以 随时 使 用 如 下 的 语句 来 调用 这 个 函数 : 

shout(); 

每 当 需 要 反复 做 一 件 事 时 ,都 可 以 利用 函数 来 避免 重复 键入 大 量 的 相同 内 容 。 不 过 ， 函 数 的 
真正 威力 体现 在 ， 你 可 以 把 不 同 的 数据 传递 给 它们 ， 而 它们 将 使 用 这 些 数据 去 完成 预定 的 操作 。 
我 们 把 传递 给 函数 的 数据 称 为 参数 (argument)。 

定义 一 个 函数 的 语法 : 


function name(arguments) { 
statements; 
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JavaScript 提供 了 许多 内 建国 数 , 在 前 面 多 次 出 现 过 的 alert 就 是 一 例 。 这 个 函数 需要 我 们 提 
供 一 个 参数 ， 它 将 弹出 一 个 对 话 框 来 显示 这 个 参数 的 值 。 

在 定义 函数 时 ,你 可 以 为 它 声明 任意 多 个 参数 ， 只 要 用 逗号 把 它们 分 隔 开 来 就 行 。 在 函数 的 
内 部 ， 你 可 以 像 使 用 普通 变量 那样 使 用 它 的 任何 一 个 参数 。 

下 面 是 一 个 需要 传递 两 个 参数 的 函数 。 如 果 把 两 个 数值 传递 给 这 个 函数 ,这 个 函数 将 对 它们 
进行 乘法 运算 : 

function multiply(num1,num2) { 


Var total = num1 * num2; 
alert (total); 


在 定义 了 这 个 函数 的 脚本 里 ， 我 们 可 以 从 任意 位 置 去 调用 这 个 函数 ， 如 下 所 示 : 
multiply(10,2); 
把 数值 10 和 2 传递 给 multiply() 函 数 的 结果 如 图 2-8 所 示 。 


图 2-8 


这 将 产生 这 样 一 种 视觉 效果 : 屏幕 上 会 立刻 弹出 一 个 显示 乘法 运算 结果 (20) 的 alert 对话 
框 。 如 果 这 个 函数 能 把 结果 返回 给 调用 这 个 国 数 的 语句 往往 会 更 有 用 。 这 很 容易 做 到 : 国 数 不 仅 
能 够 (以 参数 的 形式 ) 接收 数据 ， 还 能 够 返回 数据 。 

我 们 完全 可 以 创建 一 个 函数 并 让 它 返回 一 个 数值 、 一 个 字符 串 、 一 个 数组 或 一 个 布尔 值 。 这 
需要 用 到 return 语句 : 


function multiply(num1, num2) { 
var total = num1 * num2; 
return total; 


下 面 这 个 函数 只 有 一 个 参数 (一 个 华氏 温度 值 )， 它 将 返回 一 个 数值 (同一 温度 的 摄氏 温度 
值 ): 
function convertToCelsius(temp) { 
var result = temp - 32; 


result = result / 1.8; 
return result; 


国 数 的 真正 价值 体现 在 ,我 们 还 可 以 把 它们 当做 一 种 数据 类 型 来 使 用 , 这 意味 着 可 以 把 一 个 
函数 的 调用 结果 赋 给 一 个 变量 : 
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var temp fahrenheit = 95; 
Var temp celsius = convertToCelsius(temp_ fahrenheit); 
alert(temp celsius); 


把 华氏 温度 值 95 转换 为 摄氏 温度 值 的 结果 如 图 2-9 所 示 。 


图 2-9 


在 这 个 例子 里 ， 变 量 temp_celsius 的 值 将 是 35， 这 个 数值 由 convertToCelsius 函数 返回 。 

你 一 定 想 了 解 应 该 如 何 命 名 变量 和 函数 。 在 命名 变量 时 ,我 用 下 划 线 来 分 隔 各 个 单词 在 命 
名 函数 时 , 我 从 第 二 个 单词 开始 把 每 个 单词 的 第 一 个 字母 写成 大 写 形式 (也 就 是 所 谓 的 驼峰 命名 
法 )。 我 这 么 做 是 为 了 能 够 一 眼看 出 哪些 名 字 是 变量 ， 哪 些 名 字 是 函数 。 与 变量 的 情况 一 样 ， 
JavaScript 语言 也 不 允许 函数 的 名 字 里 包含 空格 。 驼 峰 命 名 法 可 以 在 不 违反 这 一 规定 的 前 提 下 ， 
把 变量 和 函数 的 名 字 以 一 种 既 简 单 又 明确 的 方式 区 分 开 来 。 


变量 的 作用 域 


前 面 讲 过 ， 作 为 一 种 好 的 编程 习惯 ， 在 第 一 次 对 某 个 变量 赋值 时 应 该 用 var 对 其 做 出 声明 。 
当 在 函数 内 部 使 用 变量 时 ， 就 更 应 该 这 么 做 。 

变量 既 可 以 是 全 局 的 ， 也 可 以 是 局 部 的 。 在 谈论 全 局 变量 和 局 部 变量 之 间 的 区 别 时 , 我 们 其 
实 是 在 讨论 变量 的 作用 域 (scope)。 

全 局 变量 (global variable) 可 以 在 脚本 中 的 任何 位 置 被 引用 。 一 旦 你 在 某 个 脚本 里 声明 了 一 
个 全 局 变量 , 就 可 以 从 这 个 脚本 中 的 任何 位 置 一 一 包括 函数 内 部 一 一 引用 它 。 全 局 变量 的 作用 域 
是 整个 脚本 。 

局 部 变量 (local variable) 只 存在 于 声明 它 的 那个 函数 的 内 部 ， 在 那个 函数 的 外 部 是 无 法 引 
用 它 的 。 局 部 变量 的 作用 域 仅 限于 某 个 特定 的 函数 。 

因此 ,我 们 在 函数 里 既 可 以 使 用 全 局 变量 ,也 可 以 使 用 局 部 变量 。 这 很 有 用 , 但 它 也 会 导致 
一 些 问题 。 如 果 在 一 个 函数 的 内 部 不 小 心 使 用 了 某 个 全 局 变量 的 名 字 , 即使 本 意 是 想 使 用 一 个 局 
部 变量 ，JavaScript 也 会 认为 是 在 引用 那个 全 局 变量 。 

还 好 ， 可 以 用 var 关键 字 明 确 地 为 函数 变量 设 定 作 用 域 。 

如 果 在 某 个 函数 中 使 用 了 var， 那 个 变量 就 将 被 视 为 一 个 局 部 变量 ， 它 只 存在 于 这 个 函数 的 
上 下 文中 ; 反之 ， 如 果 没 有 使 用 var， 那 个 变量 就 将 被 视 为 一 个 全 局 变量 ， 如 果 脚 本 里 已 经 存在 
一 个 与 之 同名 的 全 局 变量 ， 这 个 函数 就 会 改变 那个 全 局 变量 的 值 。 

我 们 来 看 下 面 这 个 例子 : 
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function square(num) { 


total = num * num; 
return total; 


Var total = 50; 


var number = square(20); 
alert(total); 


这 些 代 码 将 不 可 避免 地 导致 全 局 变量 total 的 值 发 生变 化 ， 如 图 2-10 所 示 。 


全 局 变量 total 的 值 变 成 了 400。 我 的 本 意 是 让 square() 函 数 只 把 它 计 算出 来 的 平方 值 返 回 
给 变量 number， 但 因为 未 把 这 个 函数 内 部 的 total 变量 明确 地 声明 为 局 部 变量 ， 这 个 函数 把 名 字 
同样 是 total 的 那个 全 局 变量 的 值 也 改变 了 。 

把 这 个 函数 写成 如 下 所 示 的 样子 才 是 正确 的 : 


function square(num) { 
Var total = num * num; 
return total; 


现在 ， 全 局 变量 total 变 得 安全 了 ， 再 怎么 调用 square() 函 数 也 不 会 影响 到 它 。 

请 记 住 , 函数 在 行为 方面 应 该 像 一 个 自给 自足 的 脚本 ,在 定义 一 个 函数 时 ,我们 一 定 要 把 它 
内 部 的 变量 全 都 明确 地 声明 为 局 部 变量 。 如 果 你 总 是 在 函数 里 使 用 var 关键 字 来 定义 变量 ,就 能 
避免 任何 形式 的 二 义 性 隐患 。 
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对 象 (object) 是 一 种 非常 重要 的 数据 类 型 ， 但 此 前 我 们 还 没有 认真 对 待 它 。 对 象 是 自 包含 
的 数据 集合 , 包含 在 对 象 里 的 数据 可 以 通过 两 种 形式 访问 一 一 属性 (property) 和 方法 (method) : 
D 属性 是 隶属 于 某 个 特定 对 象 的 变量 ， 
D 方法 是 只 有 某 个 特定 对 象 才能 调用 的 函数 。 
对 象 就 是 由 一 些 属性 和 方法 组 合 在 一 起 而 构成 的 一 个 数据 实体 。 
在 JavaScript 里， 属性 和 方法 都 使 用 “点 ”语法 来 访问 : 


Object. property 
Object. method() 
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你 已 经 见 过 如 何 用 mood 和 age 等 变量 来 存放 诸如 “心情 ”和 “年 龄 ”之 类 的 值 。 如 果 它 们 是 
某 个 对 象 的 属性 一 一 这 里 不 妨 假设 那个 对 象 的 名 字 是 Person, 我 们 就 必须 使 用 如 下 所 示 的 记号 来 
使 用 它们 : 


Person, mood 
Person.age 


假如 Person 对 象 还 关联 着 一 些 诸如 walk() 和 sleep() 之 类 的 函数 ， 这 些 函 数 就 是 这 个 对 象 的 
方法 ， 而 我 们 必须 使 用 如 下 所 示 的 记号 来 访问 它们 : 


Person. walk() 
Person. sleep() 


把 这 些 属性 和 方法 全 部 集合 在 一 起 ， 我 们 就 得 到 了 一 个 Person 对 象 。 

为 了 使 用 Person 对 象 来 描述 一 个 特定 的 人 , 需要 创建 一 个 Person 对 象 的 实例 (instance) 。 实 
例 是 对 象 的 具体 个 体 。 例如， 你 和 我 都 是 人 ,都 可 以 用 Person 对 象 来 描述 ; 但 你 和 我 是 两 个 不 同 
的 个 体 ， 很 可 能 有 着 不 同 的 属性 (例如 ， 你 和 我 的 年 龄 可 能 不 一 样 )。 因 此 ， 你 和 我 对 应 着 两 个 
不 同 的 Person 对 象 一 一 它们 虽然 都 是 Person 对 象 ， 但 它们 是 两 个 不 同 的 实例 。 

为 给 定 对 象 创建 一 个 新 实例 需要 使 用 new 关键 字 ， 如 下 所 示 : 

var jeremy = new Person; 

上 面 这 条 语句 将 创建 出 Person 对 象 的 一 个 新 实例 jeremy。 我 们 就 可 以 像 下 面 这 样 利 用 Person 
对 象 的 属性 来 检索 关于 jeremy 的 信息 了 : 


Jjeremy.age 
Jjeremy. mood 


对 象 、 属 性 、 方 法 和 实例 等 概念 比较 抽象 ， 为 了 让 大 家 对 这 些 概 念 有 一 个 直观 的 认识 ,我 在 
这 里 用 虚构 的 Person 对 象 作为 例子 。JavaScript 里 并 没有 Person 对 象 。 我 们 可 以 利用 JavaScript 
来 创建 自己 的 对 象 一 一 术语 为 用 户 定义 对 象 (user-defined object)。 这 是 一 个 相当 高 级 的 主题 , 我 
们 眼下 还 无 需 对 它 做 进一步 讨论 。 
在 电视 上 的 毫 饪 节目 里 ， 只 要 镜头 一 转 ， 厨 师 就 可 以 端 出 一 盘 美 味 的 菜肴 并 向 大 家 介绍 说 : 
“这 是 我 刚 做 好 的 。”JavaScript 与 这 种 节目 里 的 主持 人 颇 有 几 分 相似 : 它 提 供 了 一 系列 预先 定义 
好 的 对 象 ， 这 些 可 以 拿 来 就 用 的 对 象 称 为 内 建 对 象 (native object) 。 


2.7.1 内 建 对 象 
你 其 实 已 经 见 过 一 些 内 建 对 象 了 ， 数 组 就 是 其 中 一 种 。 当 我 们 使 用 new 关键 字 去 初始 化 一 个 
数组 时 ， 其 实 是 在 创建 一 个 Array 对 象 的 新 实例 : 
var beatles = new Array(); 
当 需 要 了 解 某 个 数组 有 多 少 个 元 素 时 ， 利 用 Array 对 象 的 length 属性 来 获得 这 一 信息 : 
beatles.length; 


Array 对 象 只 是 诸多 JavaScript 内 建 对 象 中 的 一 种 。 其 他 例子 包括 Math 对 象 和 Date 对 象 ， 它 
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们 分 别提 供 了 许多 非常 有 用 的 方法 供 人 们 处 理 数 值 和 日 期 值 。 例 如 ，Math 对 象 的 round 方法 可 以 
把 十 进 制 数值 舍 入 为 一 个 与 之 最 接近 的 整数 : 
var num = 7.561; 


var num = Math.round(num); 
alert (num); 


Date 对 象 可 以 用 来 存储 和 检索 与 特定 日 期 和 时 间 有 关 的 信息 。 在 创建 Date 对 象 的 新 实例 时 ， 
JavaScript 解释 器 将 自动 地 使 用 当前 日 期 和 时 间 对 它 进行 初始 化 : 


var current date = new Date(); 


Date 对 象 提 供 了 getDay()、getHours()、getMonth() 等 一 系列 方法 ， 以 供 人 们 用 来 检索 与 特定 
日 期 有 关 的 各 种 信息 。 例 如 ，getDay() 方 法 可 以 告诉 我 们 给 定 日 期 是 星期 几 : 


var today = current date.getDay(); 
在 编写 JavaScript 脚本 时 ， 内 建 对 象 可 以 帮助 我 们 快速 、 简 单 地 完成 许多 任务 。 
2.7.2 宿主 对 象 


除了 内 建 对 象 ， 还 可 以 在 JavaScript 脚本 里 使 用 一 些 已 经 预先 定义 好 的 其 他 对 象 。 这 些 对 象 
不 是 由 JavaScript 语 言 本 身 而 是 由 它 的 运行 环境 提供 的 。 具体 到 Web 应 用 , 这 个 环境 就 是 浏览 器 。 
由 浏览 器 提供 的 预定 义 对 象 被 称 为 宿主 对 象 (host object)。 

宿主 对 象 包括 Form、Image 和 Element 等 。 我 们 可 以 通过 这 些 对 象 获得 关于 网 页 上 表单 、 图 像 
和 各 种 表单 元 素 等 信息 。 

本 书 没 有 收录 这 几 个 宿主 对 象 的 例子 。 另 一 种 宿主 对 象 也 能 用 来 获得 网 页 上 的 任何 一 个 元 素 
的 信息 ， 它 就 是 document 对 象 。 在 本 书 的 后 续 内 容 里 , 我 们 将 向 大 家 介绍 document 对 象 的 许多 属 
性 和 方法 。 
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在 本 章 中 ， 我 们 介绍 了 JavaScript 语言 的 基础 知识 。 在 本 书 的 后 续 章 节 中 ， 我 们 会 用 到 这 里 
介绍 的 许多 术语 : 语句 、 变 量 、 数 组 和 国 数 等 。 这 些 概念 有 的 现在 还 不 太 容 易 理 解 ， 但 我 相信 你 
在 看 过 它们 在 脚本 里 的 实际 用 途 后 ， 就 能 彻底 搞 清 楚 了 。 在 后 面 的 学 习 里 ， 如 果 需 要 重 温 这 些 术 
语 的 含义 ， 随 时 可 以 返回 到 本 童 来 。 

本 章 只 对 “对 象 ”做 了 一 个 概念 性 的 介绍 。 如 果 你 对 它 的 理解 还 不 够 全 面 深 入 ， 别 着 急 。 我 
们 将 在 下 一 章 进 一 步 探讨 document 对 象 ,我 们 将 先 向 大 家 介绍 一 些 与 这 个 对 象 相 关联 的 属性 和 方 
法 ， 它 们 都 是 由 W3C 的 标准 DOM 提供 的 。 

在 下 一 章 中 ， 我 们 将 介绍 基于 DOM 的 基本 编程 思路 ， 并 演示 如 何 使 用 它 的 一 些 功能 非常 强 
大 的 方法 。 
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DOM 


本 章 内 容 

0 市 点 的 概念 

口 5 个 常用 DOM 方法 : getElementById、getElementsByTagName、getElementsByClassName、get- 
Attribute 和 setAttribute 


终于 要 与 DOM 面对面 了 。 本 章 将 介绍 DOM， 带 领 大 家 透 过 DOM 去 看 世界 。 
3.1 文档 : DOM 中 的 “D” 


如 果 没 有 document (文档 ), DOM 也 就 无 从 谈 起 。 当 创建 了 一 个 网 页 并 把 它 加 载 到 Web 浏览 
器 中 时 ，DOM 就 在 幕后 悄然 而 生 。 它 把 你 编写 的 网 页 文档 转换 为 一 个 文档 对 象 。 
在 人 类 语言 中 ,“ 对 象 ”这 个 词 的 含义 往往 不 那么 明确 ,， 它 几乎 可 以 用 来 称呼 任何 一 种 东西 。 
但 在 程序 设计 语言 中 ,“ 对 象 ”这 个 词 的 含义 非常 明确 。 


3.2 对 象 : DOM 中 的 “O” 


在 上 一 章 的 末尾 , 我 们 向 大 家 展示 了 几 个 JavaScript 对 象 的 例子 。 你 应 该 还 记得 ,“ 对 象 ”是 
一 种 自足 的 数据 集合 。 与 某 个 特定 对 象 相 关联 的 变量 被 称 为 这 个 对 象 的 属性 ; 只 能 通过 某 个 特定 
对 象 去 调用 的 函数 被 称 为 这 个 对 象 的 方法 。 

JavaScript 语言 里 的 对 象 可 以 分 为 三 种 类 型 。 

D 用 户 定义 对 象 (user-defined object) : 由 程序 员 自 行 创建 的 对 象 。 本 书 不 讨论 这 种 对 象 。 
口 内 建 对 象 (native object) : 内 建 在 JavaScript 语言 里 的 对 象 ， 如 Array、Math 和 Date 等 。 
D 宿主 对 象 (host object) : 由 浏览 器 提供 的 对 象 。 

即使 是 在 JavaScript 的 最 初版 本 里 , 对 编写 脚本 来 说 非常 重要 的 一 些 宿主 对 象 就 已 经 可 用 了 ， 
它们 当中 最 基础 的 对 象 是 window 对 象 。 

window 对 象 对 应 着 浏览 器 窗口 本 身 , 这 个 对 象 的 属性 和 方法 通常 统称 为 BOM (浏览 器 对 象 模 
型 )， 但 我 觉得 称 为 Window Object Model (窗口 对 象 模型 ) 更 为 贴切 。BOM 提供 了 window.open 
和 window.blur 等 方法 ， 这 些 方法 某 种 程度 上 要 为 到 处 被 滥用 的 各 种 弹出 窗口 和 下 拉 菜 单 负责 。 
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难怪 JavaScript 会 有 一 个 不 好 的 名 声 ! 

值得 庆幸 的 是 ， 我 们 不 需要 与 BOM 打 太 多 的 交道 ， 而 是 把 注意 力 集中 在 浏览 器 窗口 内 的 网 
页 内 容 上 。document 对 象 的 主要 功能 就 是 处 理 网 页 内 容 。 在 本 书 的 后 续 内 容 里 , 我 们 几乎 只 讨论 
document 对 象 的 属性 和 方法 。 

现在 ， 我 们 已 经 对 DOM 中 的 字母 “D”(document， 文档) 和 字母 “O”(object， 对 象 ) 做 
了 人 解释， 那么 字母 “M” 又 代表 着 什么 呢 ? 


3.3 模型 : DOM 中 的 “M” 


DOM 中 的 “M” 代 表 着 “Model”( 模 型 ) ， 但 说 它 代 表 着 “Map”( 地 图 ) 也 未 尝 不 可 。 模 
型 也 好 ,地 图 也 罢 ， 它 们 的 含义 都 是 某 种 事物 的 表现 形式 。 就 像 一 个 模型 火车 代表 着 一 列 真正 的 
火车 、 一 张 城市 街道 图 代表 着 一 个 实际 存在 的 城市 那样 ，DOM 代表 着 加 载 到 浏览 器 窗口 的 当前 
网 页 。 浏 览 器 提供 了 网 页 的 地 图 (或 者 说 模型 )， 而 我 们 可 以 通过 JavaScript 去 读 取 这 张 地 图 。 

既然 是 地 图 ， 就 必须 有 诸如 方向 、 等 高 线 和 比例 尺 之 类 的 图 例 。 要 想 看 懂 和 使 用 地 图 ， 就 必 
须知 道 这 些 图 例 的 含义 和 用 途 ， 这 个 道理 同样 适用 于 DOM。 要 想 从 DOM 获得 信息 ， 必 须 先 把 
各 种 表示 和 描述 文档 的 “图 例 ” 弄 明白 。 

DOM 把 一 份 文档 表示 为 一 棵 树 (这 里 所 说 的 “ 树 ” 是 数学 意义 上 的 概念 )， 这 是 我 们 理解 和 
运用 这 一 模型 的 关键 。 更 具体 地 说 ，DOM 把 文档 表示 为 一 棵 家 谱 树 。 

家 谱 树 本 身 又 是 一 种 模型 。 家 谱 树 的 典型 用 法 是 表示 一 个 人 类 家 族 的 谱系 ， 并 使 用 parent 
( 父 )、child ( 子 )、sibling (兄弟 ) 等 记号 来 表明 家 族 成 员 之 间 的 关系 。 家 谱 树 可 以 把 一 些 相当 
复杂 的 关系 简明 地 表示 出 来 : 一 位 特定 的 家 族 成 员 既 是 某 些 成 员 的 父辈 , 又 是 另 一 位 成 员 的 子 辈 ， 
同时 还 是 另 一 位 成 员 的 兄弟 。 

家 谱 树 模型 非常 适合 用 来 表示 一 份 用 (X)HTML 语言 编写 出 来 的 文档 。 

请 看 图 3-1 中 这 份 非常 基本 的 网 页 ， 它 的 内 容 是 一 份 购物 清单 。 


Ea 加 
Ry [a 


What to buy 


Don't forget to buy 由 is stuff. 


s A tin of beans 
* Cheese 
* Milk 
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<!DOCTYPE html> 
<html] lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Shopping list</title> 
</head> 
<body> 
<hi>What to buy</h1> 
<p title="a gentle reminder">Don't forget to buy this stuff.</p> 
<ul id="purchases"> 
<1i>A tin of beans</1i> 
《1i class="sale">Cheesex</l1i> 
<li class="sale important">Milk</1i> 
</ul> 
</body> 


</html> 
这 份 文档 可 以 用 图 3-2 中 的 模型 来 表示 。 


html 
head body 
meta title hi p ul 


和 3-2 


现在 我 们 来 分 析 一 下 这 个 网 页 的 结构 ， 了 人 解 它 的 构成 , 看 看 它 为 什么 那么 适合 用 前 面 提 到 的 
模型 表示 。DOCTYPE 之 后 ,一 个 打开 了 的 <html> 标 签 标识 整个 文档 的 开始 ， 这 个 网 页 里 的 所 有 


其 他 元 素 都 包含 在 这 个 元 素 里 ， 这 表示 它 至 少 是 一 个 父亲 ( parent)。 又 


因为 所 有 其 他 的 元 素 都 


包含 在 其 内 部 ,所 以 这 个 <html> 标 签 既 没 有 父亲 , 也 没有 兄弟 。 如 果 这 是 一 棵 真正 的 树 , 这 个 <html> 


标签 就 是 树 根 。 
根 元 素 是 html。 不 管 从 哪个 角度 看 ，html 都 代表 整个 文档 。 


接 下 来 深入 一 层 ， 我 们 发 现 有 <head> 和 <body> 两 个 分 支 。 它 们 位 于 同一 层次 且 互 不 包含 ， 所 


以 它们 是 兄弟 关系 。 它 们 有 着 共同 的 父 元 素 <html>， 但 又 各 有 各 的 子 元 素 
他 一 些 元 素 的 父 元 素 。 


， 所 以 它们 本 身 又 是 其 


<head> 元 素 有 两 个 子 元 素 : <meta> 和 <title> (这 两 个 元 素 是 兄弟 关系 )。<body> 元 素 有 三 个 子 
元 素 : <hl>、<p> 和 <u1> (这 三 个 元 素 是 兄弟 关系 ) 。 继 续 座 入 下 去 ， 我 们 发 现 <u1> 也 是 一 个 父 元 


素 ， 它 有 三 个 子 元 素 ， 它 们 都 是 <1i> 元 素 ， 有 一 些 class 属性 。 

利用 这 种 简单 的 家 谱 关 系 记号 ， 我 们 可 以 把 各 元 素 之 间 的 关系 简明 清晰 地 表达 出 来 。 例 如 ， 
<hl> 和 <ul> 之 间 是 什么 关系 ? 管 案 是 它们 是 兄弟 关系 。 那 么 <body> 和 <ul> 之 间 又 是 什么 关系 ? 
<body> 是 <ul> 的 父 元 素 ，<u1> 是 <body> 的 一 个 子 元素 。 

如 果 你 能 把 一 个 文档 的 各 种 元 素 想象 成 一 棵 家 谱 树 ， 我 们 就 可 以 用 同样 的 术语 描述 DOM。 
不 过 ， 与 使 用 “家 谱 树 ”这 个 术语 相 比 ， 把 文档 称 为 “节点 树 ” 更 准确 。 
3.4 节点 


VIA 


mi 


节点 (node) 这 个 词 是 个 网 络 术语 ， 它 表示 网 络 中 的 一 个 连接 点 。 一 个 网 络 就 是 由 一 些 市 点 
构成 的 集合 。 

在 现实 世界 里 , 一 切 事物 都 由 原子 构成 。 原 子 是 现实 世界 的 市 点 。 但 原子 本 身 还 可 以 进一步 
分 解 为 更 细小 的 亚 原 子 微粒 。 这 些 亚 原子 微粒 同样 也 被 当成 是 节点 。 

DOM 也 是 同样 的 情况 。 文 档 是 由 节点 构成 的 集合 ， 只 不 过 此 时 的 节点 是 文档 树 上 的 树枝 和 
树叶 而 已 。 

在 DOM 里 有 许多 不 同类 型 的 节点 。 就 像 原 子 包含 着 亚 原子 微粒 那样 , 也 有 很 多 类 型 的 DOM 
市 点 包含 着 其 他 类 型 的 市 点 。 接 下 来 我 们 先 看 看 其 中 的 三 种 : 元 素 节 点 、 文 本 节点 和 属性 节 
点 。 


3.4.1 元 素 节点 


DOM 的 原子 是 元 素 节点 (element node)。 

在 描述 刚才 那 份 “ 购 物 清单 ”文档 时 ， 我 们 使 用 了 诸如 <body>、<pP> 和 <ul> 之 类 的 元 素 。 如 果 
把 Web 上 的 文档 比 做 一 座 大 厦 ， 元 素 就 是 建造 这 座 大 厦 的 砖 块 ， 这 些 元 素 在 文档 中 的 布局 形成 
了 文档 的 结构 。 

标签 的 名 字 就 是 元 素 的 名 字 。 文 本 段落 元 素 的 名 字 是 “p”， 无 序 清单 元 素 的 名 字 是 “ul”， 
列表 项 元 素 的 名 字 是 “1i”。 

元 素 可 以 包含 其 他 的 元 素 。 在 我 们 的 “购物 清单 ”文档 里 ， 所 有 的 列表 项 元 素 都 包含 在 一 个 
无 序 清单 元 素 的 内 部 。 事 实 上 ， 没 有 被 包含 在 其 他 元 素 里 的 唯一 元 素 是 <html> 元 素 ， 它 是 我 们 的 
节点 树 的 根 元 素 。 


3.4.2 文本 节点 


元 素 节 点 只 是 节点 类 型 的 一 种 。 如 果 一 份 文档 完全 由 一 些 空 白 元 素 构成 ， 它 将 有 一 个 结构 ， 
但 这 份 文 档 本 身 将 不 会 包含 什么 内 容 。 在 内 容 为 王 的 互联 网 上 , 绝 大 多 数 内 容 都 是 由 文本 提供 的 。 

在 “购物 清单 ”例子 里 ，<p> 元 素 包 含 着 文本 “Don't forget to buy this stuff.”。 它 是 一 个 文本 
节点 (text node) 。 

在 XHTML 文档 里 , 文本 节点 总 是 被 包含 在 元 素 节 点 的 内 部 。 但 并 非 所 有 的 元 素 节 点 都 包含 
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有 文本 节点 。 在 “购物 清单 ”文档 里 ，<ul1> 元 素 没 有 直接 包含 任何 文本 市 点 ， 它 包含 着 其 他 的 元 
素 节 点 (一些 <1i> 元 素 ) ， 后 者 包含 着 文本 节点 。 


3.4.3 ”属性 节点 


属性 结 点 用 来 对 元 素 做 出 更 具体 的 描述 。 例 如 ， 几 乎 所 有 的 元 素 都 有 一 个 title 属 | 
们 可 以 利用 这 个 属性 对 包含 在 元 素 里 的 东西 做 出 准确 的 描述 : 

<p title="a gentle reminder”>Don't forget to buy this stuff.</p> 

在 DOM 中 ,title="a gentle reminder" 是 一 个 属性 节 
点 (attribute node) ， 如 图 3-3 所 示 。 因 为 属性 总 是 被 放 在 
起 始 标签 里 ， 所 以 属性 节点 总 是 被 包含 在 元 素 节 点 中 。 并 p 
非 所 有 的 元 素 都 包含 着 属性 ， 但 所 有 的 属性 都 被 元 素 包 含 。 
在 前 面 的 “购物 清单 ”示例 文档 里 ， 可 以 清楚 地 看 到 那 ee 
个 无 序 清单 元 素 (<u1>) 有 个 id 属性 。 有 些 清单 元 素 (<1i>) 


一 


生 ， 而 我 


有 class 属性 。 如 果 曾 经 用 过 CSS， 你 对 id 和 class 之 类 i Don't forget to 

的 属性 应 该 不 会 感到 陌生 。 不 过 ， 为 了 照顾 那些 对 CSS 还 。 reminder" 

不 太 熟 悉 的 读者 , 我 们 下 面 将 简要 地 重 温 几 个 最 基本 的 CSS 

概念 。 属性 节点 文本 节点 
图 3-3 

3.4.4 CSS 


DOM 并 不 是 与 网 页 结构 打交道 的 唯一 技术 。 我 们 还 可 以 通过 CSS ( 层 全 样式 表 ) 告诉 浏览 
器 应 该 如 何 显示 一 份 文档 的 内 容 。 

类 似 JavaScript 脚本 ,对 样式 的 声明 既 可 以 租 在 文档 的 <head> 部 分 <style> 标签 之 间 )， 也 可 
以 放 在 另外 一 个 样式 表 文 件 里 (参见 第 4 章 )。CSS 声明 元 素 样式 的 语法 与 JavaScript 函数 的 定义 
语法 很 相似 : 


selector { 
property: value; 


在 样式 声明 里 ， 我 们 可 以 定义 浏览 器 在 显示 元 素 时 使 用 的 颜色 、 字 体 和 字号 ， 如 下 所 示 : 


color: yellow; 
font-family: "arial", sans-serif; 
font-size: 1.2em; 


继承 (inheritance) 是 CSS 技术 中 的 一 项 强大 功能 。 类 似 于 DOM，CSS 也 把 文档 的 内 容 视 
为 一 棵 市 点 树 。 市 点 树 上 的 各 个 元 素 将 继承 其 父 元 素 的 样式 属性 。 

例如 ， 如 果 我 们 为 body 元 素 定义 了 一 些 颜色 或 字体 ， 包 含 在 body 元 素 里 的 所 有 元 素 都 将 自 
动 获得 那些 样式 : 


body { 
color: white; 
background-color: black; 


这 些 颜 色 将 不 仅 作 用 于 那些 直接 包含 在 <body> 标 签 里 的 内 容 , 还 将 作用 于 艇 套 在 body 元 素 内 


部 的 所 有 元 素 。 
图 3-4 是 把 刚才 定义 的 样式 应 用 在 “购物 清单 ”示例 文档 上 后 得 到 的 网 页 显示 效果 。 


What to buy 


Don't forget to buy this stuff. 
es。 A tin of beans 
。 Cheese 

。 Milk 


图 3-4 


在 某 些 场合 , 当 把 样式 应 用 于 一 份 文 档 时 , 我 们 其 实 只 想 让 那些 样式 作用 于 某 个 特定 的 元 素 。 
例如 ,我们 只 想 让 某 一 段 文 本 变 成 某 种 特殊 的 颜色 和 字体 ,但 不 想 让 其 他 段落 受到 影响 。 为 了 获 
得 如 此 精细 的 控制 ， 需 要 在 文档 里 插入 一 些 能 够 把 这 段 文本 与 其 他 段落 区 别 开 来 的 特殊 标志 。 

为 了 把 某 一 个 或 某 几 个 元 素 与 其 他 元 素 区 别 开 来 ， 需 要 使 用 class 属性 或 id 属性 。 

1. class 属 性 

你 可 以 在 所 有 的 元 素 上 任意 应 用 class 属性 : 


<p class="special">This paragraph has the special class</p> 
<h2 class="special">So does this headlinex</h2> 


在 样式 表 里 ， 可 以 像 下 面 这 样 为 class 属性 值 相同 的 所 有 元 素 定 义 同一 种 样式 : 


.special { 
font-style: italic; 


还 可 以 像 下 面 这 样 利 用 class 属性 为 一 种 特定 类 型 的 元 素 定义 一 种 特定 的 样式 : 


h2.special { 
text-transform: uppercase; 


2. id 属 性 

id 属性 的 用 途 是 给 网 页 里 的 某 个 元 素 加 上 一 个 独一无二 的 标识 符 ， 如 下 所 示 : 
<ul id="purchases"> 

在 样式 表 里 ， 可 以 像 下 面 这 样 为 有 特定 id 属性 值 的 元 素 定 义 一 种 独 享 的 样式 : 


#purchases { 
border: 1px solid white; 
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background-color: #333; 
color: #ccc; 
padding: 1em; 


} 
尽管 id 本 身 只 能 使 用 一 次 ,样式 表 还 是 可 以 利用 id 属性 为 包含 在 该 特定 元 素 里 的 其 他 元 素 定 
义 样式 。 


#purchases 1i { 
font-weight: bold; 


网 一 


到 3-5 是 把 刚才 利用 id 属性 定义 的 样式 应 用 在 “购物 清单 ”示例 文档 上 而 得 到 的 网 页 显示 效果 。 


What to buy 


Don't forget to buy this stuff. 


A tin of beans 


和 ”3-5 


id 属性 就 像 是 一 个 挂钩 ， 它 一 头 连 着 文档 里 的 某 个 元 素 ， 另 一 头 连 着 CSS 样式 表 里 的 茶 个 
样式 。DOM 也 可 以 使 用 这 种 挂钩。 


3.4.5 ”获取 元 素 


有 3 种 DOM 方法 可 获取 元 素 节 点 , 分 别 是 通过 元 素 ID 通过 标签 名 字 和 通过 类 名 字 来 获取 。 

1. getE1ementById 

DOM 提供 了 一 个 名 为 getElementById 的 方法 ， 这 个 方法 将 返回 一 个 与 那个 有 着 给 定 id 属性 
值 的 元 素 节 点 对 应 的 对 象 。 请 注意 ,JavaScript 语言 区 分 字母 大 小 写 ,所 以 在 写 出 "getElementById” 
0 和 弄 错 了 。 如 果 把 它 错 写成 “GetElementById” 或 “getElementbyid”， 你 都 得 
不 到 正确 的 结 

它 是 ， 对 象 特有 的 国 数 。 在 脚本 代码 里 ， 函 数 名 的 后 面 必 须 跟 有 一 对 圆 括 号 ， 这 对 贺 
括号 包含 着 国 数 的 参数 。getElementById 方 法 只 有 一 个 参数 : 你 想 获得 的 那个 元 素 的 id 属性 的 值 ， 
这 个 id 值 必须 放 在 单 引 号 或 双 引 号 里 。 

document .getElementById(id) 

下 面 是 一 个 例子 


document .getElementById("purchases") 
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这 个 调用 将 返回 一 个 对 象 , 这 个 对 象 对 应 着 document 对 象 里 的 一 个 独一无二 的 元 素 , 那个 元 
素 的 HIML id 属性 值 是 purchases。 你 可 以 用 typeof 操作 符 来 验证 这 一 点 。typeof 操作 符 可 以 告 
诉 我 们 它 的 操作 数 是 一 个 字符 串 、 数 值 、 函 数 、 布 尔 值 还 是 对 象 。 

下 面 是 把 一 些 JavaScript 语 句 插 入 到 前 面 给 出 的 “购物 清单 ”文档 之 后 得 到 的 一 份 代码 清单 ， 
新 增 的 代码 (黑体 字 部 分 ) 出 现在 </body> 结 束 标 签 之 前 。 顺 便 说 一 句 , 我 本 人 并 不 赞成 把 JavaScript 
代码 直接 嵌入 文档 ， 但 这 确实 是 一 种 简便 快捷 的 测试 手段 : 

<!DOCTYPE html> 

<htm] lang="en"> 

<head> 
<meta charset="utf-8" /> 
<title>Shopping list</title> 
</head> 
<body> 
<h1>What to buy</hi> 
<p title="a gentle reminder">Don't forget to buy this stuff.</p> 
<ul id="purchases"> 
<lLi>A tin of beans</1i> 
<l1i class="sale">Cheese</1i> 
<]i class="sale important">Milk</]i> 
</ul> 
<script> 
alert(typeof document.getElementById("purchases")); 
</script> 


</body> 
</html> 


把 上 面 这 些 代码 保存 为 一 个 XHTML 文件 。 在 Web 浏览 器 里 加 载 这 个 XHTML 文件 ， 会 弹 
出 一 个 如 图 3-6 所 示 的 alert 对 话 框 ， 它 向 你 们 报告 document .getElementById ("purchases") 的 类 
型 一 一 它 是 一 个 对 象 。 


。 A tin ofbeans 
。 Cheese 
*， Milk 


图 3-6 


事实 上 ,文档 中 的 每 一 个 元 素 都 是 一 个 对 象 。 利 用 DOM 提供 的 方法 能 得 到 任何 一 个 对 象 。 
一 般 来 说 , 用 不 着 为 文档 里 的 每 一 个 元 素 都 定义 一 个 独一无二 的 id 值 , 那 也 太 小 题 大 做 了 。 DOM 
提供 了 另 一 个 方法 来 获取 那些 没有 id 属性 的 对 象 。 

2. getElementsByTagName 

getElementsByTagName 方法 返回 一 个 对 象 数组 ,每 个 对 象 分 别 对 应 着 文档 里 有 着 给 定 标签 的 一 
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个 元 素 。 类 似 于 getElementById， 这 个 方法 也 是 只 有 一 个 参数 的 函数 ， 它 的 参数 是 标签 的 名 字 : 


element.getElementsByTagName( tag) 


它 与 getElementById 方 法 有 许多 相似 之 处 ， 但 它 返回 的 是 一 个 数组 ， 你 在 编写 脚本 时 千 万 注 
意 不 要 把 这 两 个 方法 弄 混 了 。 
下 面 是 一 个 例子 


document ,getElementsByTagName("1i") 

这 个 调用 将 返回 一 个 对 象 数 组 , 每 个 对 象 分 别 对 应 着 document 对 象 中 的 一 个 列表 项 元 素 。 与 
任何 其 他 的 数组 一 样 ， 我 们 可 以 利用 length 属性 查 出 这 个 数组 里 的 元 素 个 数 。 

首先 ， 在 上 一 小 市 给 出 的 XHTML 示例 文档 里 把 <script> 标 签 中 的 alert 语句 替换 为 下 面 这 


alert(document.getElementsByTagName("1i").1length); 


你 会 看 到 这 份 示 例文 档 里 的 列表 项 元 素 的 个 数 : 3。 这 个 数组 里 的 每 个 元 素 都 是 一 个 对 象 。 
可 以 通过 利用 一 个 循环 语句 和 typeof 操作 符 去 遍历 这 个 数组 来 验证 这 一 点 。 例 如 , 你 可 以 试 试 下 
面 这 个 for 循环 : 


for (var i=0; i «< document. getElementsByTagNamel "1i").length; i++) { 
alert(typeof document .getElementsByTagName("1i")[i]); 


请 注意 ， 即 使 在 整个 文档 里 这 个 标签 只 有 一 个 元 素 ，getElementsByTagName 也 返回 一 个 数组 。 
此 时 ， 那 个 数组 的 长 度 是 1。 

你 或 许 已 经 开始 觉得 用 键盘 反复 融入 document .getElementsByTagName("1i") 是 件 很 麻烦 的 事 
青 ， 而 这 些 长 长 的 字符 串 会 让 代码 变 得 越 来 越 难以 阅读 。 有 个 简单 的 办 法 可 以 减少 不 必要 的 打字 
量 并 改善 代码 的 可 读 性 ， 只 要 把 document .getElementsByTagName("1i") 赋 值 给 一 个 变量 即 可 。 

请 把 <script> 标 签 中 的 alert 语句 替换 为 下 面 这 些 语句 

var items = document.getElementsByTagName("1i"); 


for (var i=0; i items.length; i++) { 
alert(typeof items[i]); 


现在 ， 你 将 看 到 三 个 alert 对 话 框 ， 显 示 的 消息 都 是 “object”。 
getElementsByTagName 允许 把 一 个 通配符 作为 它 的 参数 , 而 这 意味 着 文档 里 的 每 个 元 素 都 将 在 
这 个 函数 所 返回 的 数组 里 占有 一 席 之 地 。 通 配 符 ( 星 号 字符 “*”) 必须 放 在 引号 里 ， 这 是 为 了 让 
与 乘法 操作 符 有 所 区 别 。 如 果 你 想 知道 某 份 文档 里 总 共有 多 少 个 元 素 节 点 , 像 下 面 这 样 使 
通配符 即 可 : 


alert(document.getElementsByTagName("*").length); 


还 可 以 把 getElementById 和 getElementsByTagName 结合 起 来 运用 。 例如 , 刚才 给 出 的 几 个 例子 
都 是 通过 document 对 象 调用 getElementsByTagName 的 ， 如 果 只 想 知 道 id 属性 值 是 purchase 的 元 素 
包含 着 多 少 个 列表 项 ， 必 须 通过 一 个 更 具体 的 对 象 去 调用 这 个 方法 ， 如 下 所 示 : 


var shopping = document.getElementById("purchases"); 
Var items = shopping.getElementsByTagName("*"); 


在 这 两 条 语句 执行 完毕 后 ，items 数组 将 只 包含 id 属性 值 是 purchase 的 无 序 清单 里 的 元 素 。 
具体 到 这 个 例子 ，itens 数组 的 长 度 刚好 与 这 份 文档 里 的 列表 项 元 素 的 总 数 相等 

alert (items.length); 

如 果 还 需要 更 多 的 证 据 ， 下 面 这 些 语句 将 证 明 items 数组 里 的 每 个 值 确实 是 一 个 对 象 ; 


for (var i=0; i «< items.length; i++) { 
alert(typeof items[i]); 
} 


3. getElementsByClassName 

HTML5 DOM (http://www.whatwg.org/specs/web-apps/current-work/) 中 新 增 了 一 个 令 人 期 待 
已 久 的 方法 : getElementsByClassName。 这 个 方法 让 我 们 能 够 通过 class 属性 中 的 类 名 来 访问 元 素 。 
不 过 ， 由 于 这 个 方法 还 比较 新 ， 某 些 DOM 实现 里 可 能 还 没有 ， 因 此 在 使 用 的 时 候 要 当心 。 下 面 
我 们 先 来 看 一 看 这 个 方法 能 帮 我 们 做 什么 ， 然 后 再 讨论 怎么 可 靠 地 使 用 该 方法 。 

与 getElementsByTagName 方法 类 似 ，getElementsByClassName 也 只 接受 一 个 参数 ， 就 是 类 名 : 

getElementsByClassName(class) 

这 个 方法 的 返回 值 也 与 getElementsByTagName 类 似 ， 都 是 一 个 具有 相同 类 名 的 元 素 的 数组 。 
下 面 这 行 代码 返回 的 就 是 一 个 数组 ， 其 中 包含 类 名 为 "sale" 的 所 有 元 素 : 

document ,getElementsByClassName("sale") 

使 用 这 个 方法 还 可 以 查找 那些 带 有 多 个 类 名 的 元 素 。 要 指定 多 个 类 名 ,只 要 在 字符 串 参数 中 
用 空格 分 隔 类 名 即 可 。 例 如 ， 在 <script> 标 签 中 添加 下 面 这 行 alert 代码 : 

alert(document.getElementsByClassName("important sale").length); 

你 会 看 到 警告 框 中 显示 1， 表 示 只 有 一 个 元 素 匹 配 ， 因 为 只 有 一 个 元 素 同 时 带 有 "important" 
和 "sale" 类 名 。 注 意 ， 即 使 在 元 素 的 class 属性 中 ， 类 名 的 顺序 是 "sale important" 而 非 参 数 中 指 
定 的 "important sale", 也 照样 会 匹配 该 元 素 。 不 仪 类 名 的 实际 顺序 不 重要 ， 就 算 元 素 还 带 有 更 多 
类 名 也 没有 关系 。 

与 使 用 getElementsByTagName 一 样 ,也 可 以 组 合 使 用 getElementsByClassName 和 和 getElementById。 
如 果 你 想 知道 在 id 为 "purchases" 的 元 素 中 有 多 少 类 名 包含 "sale" 列 表 项 , 可 以 先 找 到 那个 特定 的 
对 象 ， 然 后 再 调用 getElementsByClassName; 


var Shopping = document.getElementById("purchases"); 
var Sales = shopping.getElementsByClassName("sale"); 


这 样 ，sales 数组 中 包含 的 就 只 是 位 于 "purchases" 列 表 中 的 带 有 "sale" 类 的 元 素 。 运行 下 面 这 
行 代码 ， 就 会 看 到 sales 数组 中 包含 两 项 : 

alert (sales.length); 

这 个 getElementsByClassName 方法 非常 有 用 ， 但 只 有 较 新 的 浏览 器 才 支 持 它 。 为 了 弥补 这 一 
不 足 ，DOM 脚本 程序 员 需 要 使 用 已 有 的 DOM 方法 来 实现 自己 的 getElementsByClassName， 有 点 像 
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是 成 人 礼 似 的 。 而 多 数 情 况 下 ， 他 们 的 实现 过 程 都 与 下 面 这 个 getElementsByClassName 大 致 相似 ， 
这 个 函数 能 适用 于 新 老 浏览 器 : 


function getElementsByClassName(node, classname) { 
if (node.getElementsByClassName) { 
// 使 用 现 有 方法 
return node.getElementsByClassName(classname); 
} else { 
var results = new Array(); 
Var elems = node.getElementsByTagName("*"); 
for (var i=0; icelems.length; i++) { 
if (elems[i].className.indexOf(classname) != -1) { 
results[results.length] = elems[i]; 


return results; 
} 
} 


这 个 getElementsByClassName 函数 接受 两 个 参数 。 第 一 个 node 表示 DOM 树 中 的 搜索 起 点 ， 
第 二 个 classname 就 是 要 搜索 的 类 名 了 。 如 果 传 入 节点 上 已 经 存在 了 适当 的 getElementsByClassName 
函数 ， 那 么 这 个 新 函数 就 直接 返回 相应 的 节点 列表 。 如 果 getElementsByClassName 函数 不 存在 ， 


这 个 新 函数 就 会 循环 遍历 所 有 标签 ， 查 找 带 有 相应 类 名 的 元 素 。( 这 个 例子 不 适用 于 多 个 类 名 ,) 
如 果 使 用 这 个 函数 来 模拟 前 面 取 得 购物 列表 的 操作 ， 就 可 以 这 样 写 : 


var shopping = document.getElementById("purchases"); 
var sales = getElementsByClassName(shopping, "sale"); 


当然 ,搜索 匹配 的 DOM 元 素 的 方法 有 很 多 ,但 真正 高 效 的 却 不 多 ， 有 兴趣 的 读者 可 以 参考 
Robert Nyman 的 文章 The Ultimate getElementsByClassName(http://robertnyman.com/2008/05/27/the- 
ee getelementsbyclassname-anno-2008 ) 。 
第 5 章 将 继续 讨论 类 似 的 支持 性 问题 ， 以 及 如 何 解决 这 些 问题 。 第 7 章 将 更 详细 地 探讨 DOM 
操作 方法 。 


3.4.6 盘点 知识 识 点 


你 一 定 已 经 厌倦 了 看 那么 多 人 遍 显 示 着 单词 “object” 的 alert 对 话 框 。 你 一 定 已 经 明白 : 文档 
中 的 每 个 元 素 节 点 都 是 一 个 对 象 。 不 仅 如 此 , 这 些 对 象 中 的 每 一 个 还 天 生 具 有 一 系列 非常 有 用 的 
方法 ， 这 要 归功 于 DOM。 利 用 这 些 预先 定义 好 的 方法 ， 我 们 不 仅 可 以 检索 出 文档 里 任何 一 个 对 
象 的 信息 ， 甚 至 还 可 以 改变 元 素 的 属性 。 

下 面 是 对 本 章 此 前 学 习 内 容 的 一 个 简要 总 结 。 

0 一 份 文档 就 是 一 棵 节点 树 。 

D 节点 分 为 不 同 的 类 型 : 元 素 节 点 、 属 性 节点 和 文本 节点 等 。 

D getElementByid 将 返回 一 个 对 象 ， 该 对 象 对 应 着 文档 里 的 一 个 特定 的 元 素 节点 。 

口 getElementsByTagName 和 getElementsByClassName 将 返回 一 个 对 象 数 组 ， 它 们 分 别 对 应 着 文 
档 里 的 一 组 特定 的 元 素 节 点 。 


3.3 获取 和 设置 属性 43 


上 每 个 节点 都 是 一 个 对 象 。 
接 下 来 介绍 节点 对 象 的 属性 和 方法 。 
3.5 ”获取 和 设置 属性 


至 此 ,我 们 已 经 介绍 了 3 种 获取 特定 元 素 的 方法 :分 别 是 getElementById,getE1ementsByTagName 
和 getElementsByClassName。 得 到 需要 的 元 素 以 后 ,我 们 就 可 以 设法 获取 它 的 各 个 属性 。getAttribute 
方法 就 是 用 来 做 这 件 事 的 。 相 应 地 ， setAttribute 方法 则 可 以 更 改 属性 节点 的 值 。 


3.5.1 getAttribute 


getAttribute 是 一 个 函数 。 它 只 有 一 个 参数 


你 打算 查询 的 属性 的 名 字 : 
object.getAttribute(attribute) 


与 此 前 我 们 介绍 过 的 那些 方法 不 同 ， getAttribute 方法 不 属于 document 对 象 ， 所 以 不 能 通过 
document 对 象 调用 。 它 只 能 通过 元 素 节 点 对 象 调用 。 例如, 可 以 与 getElementsByTagName 方法 合用 ， 
获取 每 个 <p> 元 素 的 title 属性 ， 如 下 所 示 : 

var paras = document.getElementsByTagName("p"); 


for (var i=0; i < paras.length; i++ ) { 
alert(paras[il].getAttribute("title")); 


把 上 面 这 段 代码 放 到 前 面 给 出 的 “购物 清单 ”文件 的 末尾 ， 然 后 在 Web 浏览 器 里 重新 加 载 
这 个 页 面 ， 屏幕 上 将 弹出 一 个 显示 着 文本 消息 “a gentle reminder” 的 alert 对 话 框 
在 “购物 清单 ”文件 里 只 有 一 个 <p> 元 素 ， 并 且 它 有 title 属性 。 假 如 这 份 文档 有 更 多 个 <p> 
元 素 ， 并 且 它 们 没有 title 属性 ， 则 getAttribute("title") 方 法 会 返回 null 值 。 在 JavaScript 里 ， 
null 的 含义 是 “没有 值 ”"。 把 下 面 代码 添加 到 “购物 清单 ”文件 中 的 现 有 <p> 标 签 之 后 : 
<p>This is just a test</p> 
重新 加 载 这 个 页 面 。 这 一 次 ， 你 将 看 到 两 个 alert 对 话 框 ， 而 第 二 个 对 话 框 将 是 一 片 空白 或 
者 是 只 显示 着 单词 “null*， 这 取决 于 你 使 用 是 哪 种 Web 浏览 器 。 
我 们 可 以 修改 脚本 , 让 它 只 在 title 属性 有 值 时 才 弹 出 消息 。 我 们 将 增加 一 条 if 语句 来 检查 
getAttribute 的 返回 值 是 不 是 nul1。 趁 着 这 个 机 会 , 我 们 顺便 增加 几 个 变量 以 提高 脚本 的 可 读 性 。 
var paras = document.getElementsByTagName("p"); 
for (var i=0; ic paras.length; i++) { 
var title text = paras[i].getAttribute("title"); 
if (title text != null) { 
alert(title text); 


} 
} 


现在 重新 加 载 这 个 页 面 ， 你 会 看 到 一 个 显示 着 “a gentle reminder” 消 息 的 alert 对 话 框 ， 如 
图 3-7 所 示 。 


出 
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图 3-7 


我 们 甚至 可 以 把 这 段 代 码 缩 得 更 短 一 些 。 当 检查 某 项 数据 是 否 是 null 值 时 ， 我 们 其 实 是 在 
检查 它 是否 存 在 。 这 种 检查 可 以 简化 为 直接 把 被 检查 的 数据 用 作 if 语句 的 条 件 。if (something) 
与 if (something != nul1) 完 全 等 价 ， 但 前 者 显然 更 为 简明 。 此 时 ， 如 果 something 存在 ， 则 if 语 
名 的 条 件 将 为 真 ， 如 果 something 不 存在 ， 则 if 语句 的 条 件 将 为 假 。 

具体 到 这 个 例子 ， 只 要 我 们 把 if (title text != nul1) 替 换 为 if (title text)， 我 们 就 可 以 
得 到 更 简明 的 代码 。 此 外 ， 为 了 进一步 增加 代码 的 可 读 性 ， 我 们 还 可 以 趁 此 机 会 把 alert 语句 与 
讶 语句 写 在 同一 行 上 ， 这 可 以 让 它们 更 接近 于 我 们 日 常生 活 中 的 英语 句子 : 

var paras = document.getElementsByTagName("p"); 

for (var i=0; ic paras.length; i++) { 


var title text = paras[i].getAttribute("title"); 
if (title text) alert(title text); 


3.5.2 setAttribute 


此 前 介绍 的 所 有 方法 都 是 用 来 获取 信息 。setAttribute() 有 点 不 同 : 它 允 许 我 们 对 属性 节点 的 
值 做 出 修改 。 与 getAttribute 一 样 ，setAttribute 也 只 能 用 于 元 素 节点 : 

object.setAttribute(attribute, value) 

在 下 面 的 例子 里 ， 第 一 条 语句 得 到 id 是 purchase 的 元 素 , 第 二 条 语句 把 这 个 元 素 的 title 
属性 值 设置 为 a 1ist of goods: 


var shopping = document.getElementById("purchases"); 
shopping.setAttribute("title","a list of goods"); 


我 们 可 以 利用 getAttribute 来 证 明 这 个 元 素 的 title 属性 值 确实 发 生 了 变化 : 


var shopping = document.getElementById("purchases"); 
alert(shopping.getAttribute("title")); 

shopping. setAttribute("title","a list of goods"); 
alert(shopping.getAttribute("title")); 


加 载 页 面 后 将 弹出 两 个 alert 对 话 框 : 第 一 个 alert 对话 框 出 现在 setAttribute 被 调用 之 前 ， 
它 将 是 一 片 空白 或 显示 单词 “null”;， 第 二 个 出 现在 设置 title 属性 值 之 后 ， 它 将 显示 “a list of 


goods” 消 息 。 

在 上 例 中 ， 我 们 设置 了 一 个 节点 的 title 属性 ， 这 个 属性 原先 并 不 存在 。 这 表明 setAttribute 
实际 完成 了 两 项 操作 : 先 创建 这 个 属性 ， 然 后 设置 它 的 值 。 如 果 setAttribute 用 在 一 个 本 身 就 有 
这 个 属性 的 元 素 节 点 上 ， 这 个 属性 的 值 就 会 被 覆盖 掉 。 

在 “购物 清单 ”示例 文档 里 ，<p> 元 素 已 经 有 了 一 个 title 属性 ， 这 个 属性 的 值 是 a gentle 
reminder。 可 以 用 setAttribute 来 改变 它 的 值 : 


var paras = document.getElementsByTagName("p"); 
for (var i=0; i< paras.length; i++) { 
var title text = paras[il].getAttribute("title"); 


if (title text) { 
paras[il].setAttribute("title”,"brand new title text"); 
alert(paras[i].getAttribute("title")); 


} 

上 面 这 段 代码 将 先 从 文档 里 获取 全 部 带 有 title 属性 的 <p> 元 素 ， 然后 把 它们 的 title 属性 值 
都 修改 为 brand new title text。 对 “购物 清单 ”文件 来 说 ， 属 性 值 a gentle reminder 会 被 覆盖 。 

这 里 有 一 个 非常 值得 关注 的 细节 : 通过 setAttribute 对 文档 做 出 修改 后 ， 在 通过 浏览 器 的 
view source (查看 源 代码 ) 选项 去 查看 文档 的 源 代码 时 看 到 的 仍 将 是 改变 前 的 属性 值 , 也 就 是 说 ， 
setAttribute 做 出 的 修改 不 会 反映 在 文档 本 身 的 源 代码 里 。 这 种 “ 表 里 不 一 ”的 现象 源 自 DOM 
的 工作 模式 : 先 加 载 文 档 的 静态 内 容 ， 再 动态 刷新 ， 动 态 刷 新 不 影响 文档 的 静态 内 容 。 这 正 是 
DOM 的 真正 威力 : 对 页 面 内 容 进行 刷新 却 不 需要 在 浏览 器 里 刷新 页 面 。 


3.6 小 结 


本 章 介 绍 了 DOM 提供 的 五 个 方法 : 
DO getElementById 

DQ getElementsByTagName 

DO getElementsByClassName 

QD getAttribute 

OD setAttribute 

这 五 个 方法 是 将 要 编写 的 许多 DOM 脚本 的 基石 。 

DOM 还 提供 了 许多 其 他 的 属性 和 方法 ， 如 nodeName、nodeValue、childNodes、nextSibling 和 
parentNode 等 ， 这 里 仅 举 这 么 几 个 例子 。 在 后 面 需 要 的 时 候 我 会 详细 介绍 它们 。 我 现在 就 提 到 它 
们 主要 是 为 了 吊 吊 大 家 的 胃口 。 

本 章 内 容 偏重 于 理论 。 在 看 过 那么 多 的 alert 对 话 框 之 后 ， 相 信 大 家 都 迫不及待 地 想 通 过 一 
些 其 他 东西 进一步 了 解 和 测试 DOM, 而 我 也 正 想 通过 一 个 案例 来 进一步 展示 DOM 的 强大 威力 。 
在 下 一 章 中 ， 我 将 带领 大 家 利用 本 章 介绍 的 DOM 方法 去 创建 一 个 基于 JavaScript 的 图 片 库 。 
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案例 研究 : JavaScfipt 图 片 库 


本 章 内 容 

DO 编写 一 个 优秀 的 标记 文件 。 

D 编写 一 个 JavaScript 函数 以 显示 用 户 想 要 查看 的 图 片 。 
口 由 标记 触发 函数 调用 。 

口 使 用 几 个 新 方法 扩展 这 个 JavaScript 函数 。 


现在 ， 是 时 候 让 DOM 去 做 些 事 了 。 在 这 一 章 中 ， 我 将 带领 大 家 用 JavaScript 和 DOM 去 建 
立 一 个 图 片 库 。 

把 图 片 发 布 到 网 上 的 办 法 很 多 。 你 可 以 简单 地 把 所 有 的 图 片 都 放 到 一 个 网 页 里 。 不 过 ， 如 果 
打算 发 布 的 图 片 比较 多 , 这 个 页 面 很 快 就 会 很 快 变 得 过 于 庞大 。 要 知道 , 虽然 网 页 标记 代码 没有 
多 大 , 但 加 上 那些 图 片 后 用 户 要 下 载 的 数据 量 就 相当 可 观 了 。 我们 必须 面 对 这 样 一 个 现实 : 没有 
人 愿意 等 待 很 长 很 长 的 时 间 去 下 载 一 个 网 页 。 

因此 , 为 每 张 图 片 分 别 创 建 一 个 网 页 的 解决 方案 值得 考虑 。 这 样 你 的 图 片 库 将 不 再 是 一 个 体 
职 庞 大 、 难 以 下 载 的 网 页 ， 而 变 成 了 许多 个 尺寸 合理 、 便 于 下 载 和 浏览 的 页 面 。 不 过 ， 这 一 解决 
方案 并 非 尽善尽美 。 首 先 ， 为 每 张 图 片 分 别 制作 一 个 网 页 需要 花费 很 多 很 多 的 时 间 ， 其 次, 每 个 
网 页 上 应 该 提供 某 种 导航 链接 来 给 出 当前 图 片 在 整个 图 片 库 里 的 位 置 , 方便 人 们 从 当前 图 片 转 到 
其 他 的 图 片 。 

如 果 想 两 全 其 美 , 利用 JavaScript 来 创建 图 片 库 将 是 最 佳 的 选择 : 把 整个 图 片 库 的 浏览 链接 集 
中 安排 在 图 片 库 主页 里 , 只 在 用 户 点 击 了 这 个 主页 里 的 某 个 图 片 链接 时 才 把 相应 的 图 片 传送 给 他 。 


4.1 标记 


为 了 完成 JavaScript 图 片 库 ， 我 特意 用 数码 相机 拍摄 了 几 张 照片 ， 并 把 它们 修整 成 最 适合 于 
用 浏览 器 来 查看 的 尺寸 ， 即 400 像素 宽 x 300 像素 高 。 在 你 自己 做 练习 时 ,大 可 不 必 拘 泥 于 这 个 尺 
寸 , 你 可 以 使 用 任何 图 片 。 
第 一 项 工作 是 为 这 些 图 片 创 建 一 个 链接 清单 。 因 为 我 没 打算 让 这 些 图 片 按照 特定 顺序 排列 ， 
所 以 将 使 用 一 个 无 序 清单 元 素 (<u1>) 来 列 出 那些 链接 。 如 有 果 你 自己 的 图 片 已 事先 排 好 序 ， 那 就 


4.1 标记 47 


最 好 使 用 一 个 有 序 清单 元 素 (<01>) 来 标记 这 些 图 片 链接 。 
下 面 是 我 的 标记 清单 : 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Image Gallery</title> 
</head> 
<body> 
<h1i>Snapshots</h1> 
<ul> 
<1i> 
<a href="images/fireworks.jpg" title="A fireworks display">Fireworks</a> 
</]i> 
<1i> 
<a href="images/coffee.jpg" title="A cup of black coffee">Coffeex</a> 
</1i> 
<1i> 
<a href="images/rose.jpg" title="A red, red rose">Rosex</a> 
</1i> 
<1i> 
<a href="images/bigben.jpg” title="The famous clock">Big Ben</a> 
</]i> 


</body> 
</html> 


我 将 把 这 些 标记 保存 到 gallery.html 文件 ,并 把 图 片 集中 保存 在 目录 images 里 。 我 的 images 
目录 和 gallery.html 文件 位 于 同一 个 目录 下 。 在 9allery.html 文件 里 ， 无 序 清单 元 素 中 的 每 个 链 
接 分 别 指 问 不 同 的 图 片 。 在 浏览 器 窗口 里 点 击 某 个 链接 就 可 以 转 到 相应 的 图 片 , 但 从 图 片 重新 返 
回 到 链接 清单 目前 还 必须 借助 于 浏览 器 的 Back (后 退 ) 按钮 。 图 4-1 是 这 个 基本 的 链接 清单 在 浏 
览 器 窗口 里 的 显示 效果 。 
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这 是 一 个 相当 令 人 满意 的 网 页 ,但 它 的 默认 行为 还 不 太 理想 。 下 面 是 我 希望 改进 的 几 个 地 方 。 
D 当 点 击 某 个 链接 时 ， 我 希望 能 留 在 这 个 网 页 而 不 是 转 到 另 一 个 窗口 。 
D 当 点 击 某 个 链接 时 ， 我 希望 能 在 这 个 网 页 上 同时 看 到 那 张 图 片 以 及 原 有 的 图 片 清单 。 
下 面 是 我 为 了 实现 上 述 目标 而 需要 完成 的 几 项 改进 。 
D 通过 增加 一 个 “ 占 位 符 ” 图 片 的 办 法 在 这 个 主页 上 为 图 片 预 留 一 个 浏览 区 域 。 
OD 在 点 击 某 个 链接 时 ， 拦 截 这 个 网 页 的 默认 行为 。 
D 在 点 击 某 个 链接 时 ， 把 “ 占 位 符 ” 图 片 替 换 为 与 那个 链接 相对 应 的 图 片 。 

先 来 解决 “ 占 位 符 ” 图 片 的 问题 。 我 选用 了 一 个 类 似 于 名 片 的 图 片 ， 你 可 以 根据 个 人 喜好 来 
决定 选用 的 图 片 ， 即 使 选用 一 个 空白 图 片 也 没 问题 。 

把 下 面 这 些 代码 插入 到 图 片 清单 的 末尾 : 

<img id="placeholder" src="images/placeholder.gif" alt="my image gallery” /> 

我 对 这 个 图 片 的 id 属性 进行 了 设置 , 这 将 使 我 可 以 通过 一 个 外 部 的 样式 表 对 图 片 的 显示 位 置 
和 显示 效果 加 以 控制 。 例 如 ， 可 以 让 这 个 图 片 出 现在 链接 清单 的 旁边 而 不 是 它 的 下 方 ， 还 可 以 在 
自己 的 JavaScript 代码 里 使 用 这 个 id 值 。 下 面 是 这 个 页 面 在 增加 了 “ 占 位 符 ” 图 片 后 的 显示 效果 。 
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图 4-2 
现在 ,标记 文件 已 经 准备 好 了 ， 接 下 来 的 工作 是 编写 JavaScript 代码 。 
4.2 JavaScript 


为 了 把 “ 占 位 符 ” 图 片 替换 为 想 要 查看 的 图 片 ， 需 要 改变 它 的 src 属性 。setAttribute 是 完 
成 这 项 工作 的 最 佳 选择 ,而 我 将 利用 这 个 方法 写 一 个 函数 。 这 个 函数 只 有 一 个 参数 ， 即 一 个 图 片 
链接 。 它 通过 改变 “ 占 位 符 ” 图 片 的 src 属性 的 办 法 将 其 替换 为 参数 图 片 。 
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首先 , 需要 给 函数 起 一 个 好 名 字 ， 它 应 能 描述 这 个 函数 的 用 途 ， 还 要 简明 扼要 。 我 决定 把 这 
个 国 数 命名 为 showPic。 还 需要 给 这 个 函数 的 参数 起 一 个 名 字 ， 我 决定 把 它 命 名 为 whichpic: 

function showPic(whichpic ) 

whichpic 代表 着 一 个 元 素 节 点 ， 具 体 地 说 ， 那 是 一 个 指向 某 个 图 片 的 <a> 元 素 。 我 需要 分 解 出 
图 片 的 文件 路 径 ， 这 可 以 通过 在 whichpic 元 素 上 调用 getAttribute 得 到 ， 只 要 把 "href "作为 参数 
专递 给 getAttribute 就 行 了 : 

whichpic. getAttribute("href") 

我 将 把 这 个 路 径 存 入 变量 source: 

var source = whichpic.getAttribute("href"); 

接 下 来 ， 还 需要 获取 “ 占 位 符 ” 图 片 ， 这 对 getElementById 来 说 不 过 是 小 菜 一 碟 : 

document .getElementById( "placeholder") 

我 不 想 重复 融入 “document .getElementById("placeholder")” 这 么 长 的 字符 串 ， 所 以 将 把 这 个 
元 素 赋 给 变量 placeholder: 

var placeholder = document.getElementById("placeholder"); 

现在 ， 已 经 声明 并 赋值 了 两 个 变量 : source 和 placeholder。 它 们 可 以 让 脚本 简明 易 读 。 

我 将 使 用 setAttribute 对 placeholder 元 素 的 src 属性 进行 刷新 。 还 记得 吗 , 这 个 方法 有 两 个 
参数 : 一 个 是 属性 名 ， 另 一 个 是 属性 的 值 。 具 体 到 这 个 例子 ， 因 为 我 想 对 src 属性 进行 设置 ， 所 
以 第 一 个 参数 是 "src"， 至 于 第 二 个 参数 ， 也 就 是 src 属性 的 值 ， 我 已 经 把 它 保 存在 source 变量 
里 了 : 

pl1aceholder.setAttribute("STC" ,SOUTCe) ; 

这 显然 要 比 下 面 这 么 元 长 的 代码 更 容易 阅读 和 理解 : 


document .getElementById("placeholder").setAttribute("src", 
w whichpic.getAttribute("href")); 


4.2.1 非 DOM 解决 方案 


其 实 ， 不 使 用 setAttribute 方 法 也 可 以 改变 图 片 的 src 属性。 

setAttripute 方 法 是 “第 1 级 DOM”(DOM Level1) 的 组 成 部 分 ， 它 可 以 设置 任意 元 素 节 点 
的 任意 属性 。 在 “第 1 级 DOM” 出 现 之 前 ， 你 可 以 通过 另外 一 种 办 法 设置 大 部 分 元 素 的 属性 ， 
这 个 办 法 到 现在 仍然 有 效 。 

例如 ， 如 果 想 改变 某 个 input 元 素 的 value 属性 ， 可 以 这 样 : 

element.value = "the new value” 

这 与 下 面 这 条 语句 的 效果 是 等 价 的 : 


element. setAttribute("valve", "the new value"); 


1 
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类 似 的 办 法 也 可 以 用 来 改变 图 片 的 src 属性 。 例 如 ， 在 我 的 图 片 库 脚本 里 ， 完 全 可 以 用 下 面 
这 条 语句 来 代 赫 setAttribute: 

placeholder.src = source; 

我 个 人 更 喜欢 使 用 setAttribute。 起 码 不 必 费 心 去 记忆 哪些 元 素 的 哪些 属性 可 以 用 DOM 之 
前 的 哪些 方法 去 设置 。 虽然 用 那些 老 办 法 可 以 毫 无 问题 地 对 文档 里 的 图 片 、 表 单 和 其 他 一 些 元 素 
的 属性 进行 设置 ,但 setAttribute 的 优势 在 于 它 可 以 修改 文档 中 的 任何 一 个 元 素 的 任何 一 个 属性 。 

“第 1 级 DOM” 的 另 一 个 优势 是 可 移植 性 更 好 。 那 些 老 方法 只 适用 于 Web 文档 ，DOM 则 适 
用 于 任何 一 种 标记 语言 。 虽然 这 种 差异 对 我 们 这 个 例子 没有 影响 , 但 我 希望 大 家 能 够 牢 牢记 住 这 
一 点 : DOM 是 一 种 适用 于 多 种 环境 和 多 种 程序 设计 语言 的 通用 型 API。 如 果 想 把 从 本 书 学 到 的 
DOM 技巧 运用 在 Web 浏览 器 以 外 的 应 用 环境 里 ， 严 格 遵守 “第 1 级 DOM” 能 够 让 你 避免 与 兼 
容 性 有 关 的 任何 问题 。 


4.2.2 最终 的 函数 代码 清单 
下 面 是 showPic 函数 完整 的 代码 清单 : 


function showpic(whichpic) { 
var source = whichpic.getAttribute("href"); 
var placeholder = document.getElementById("placeholder"); 
placeholder .setAttribute("src",source); 


接 下 来 的 任务 是 把 这 个 JavaScript 函数 与 标记 文档 结合 起 来 。 
4.3 应 用 这 个 JavaScript 函数 


函数 写 完 了 , 接 下 来 就 要 在 图 片 库 文档 里 使 用 它 。 把 这 个 国 数 保存 在 扩展 名 为 .js 的 文本 文件 
中 。 在 此 ， 可 以 给 它 起 个 名 字 叫 showPic.js。 

若 一 个 站 点 用 到 多 个 JavaScript 文件 ,为 了 减少 对 站 点 的 请 求 次 数 (提高 性 能 ) ,应 
该 把 这 些 .js 文件 合并 到 一 个 文件 中 。 本 书 为 了 便于 说 明 问题 ， 不 少 例子 都 使 用 了 多 个 
文件 。 等 到 了 第 S 章 ， 我 们 会 专门 讨论 这 个 问题 以 及 其 他 提升 站 点 性 能 的 最 佳 实践 。 

就 像 我 刚才 决定 把 所 有 的 图 片 集中 存放 在 images 子 目录 里 那样 ,把 所 有 的 JavaScript 脚本 文 
件 集中 存放 在 一 个 子 目 录 里 也 是 个 好 主意 。 我 创建 了 一 个 名 为 scripts 的 子 目录 并 把 showPic.js 
文件 保存 到 其 中 。 

现在 ， 需 要 在 图 片 库 文档 里 插入 一 个 链接 来 引用 这 个 JavaScript 脚本 文件 。 我 将 把 下 面 这 行 
插入 到 HTML 文档 的 </body> 标 签 之 前 : 

<script type= "text/javascript”STC=" SCITipts/ShowPic.js" ></ScTipt> 

这 样 在 图 片 库 文档 里 就 可 以 使 用 showPic 函数 了 。 如 果 到 此 打住 ， 那 么 showPic 函数 永远 也 
不 会 被 调用 。 我 们 需要 给 图 片 列表 的 链接 添加 行为 ， 也 就 是 事件 处 理 函数 (event handler), 才能 
达成 目标 。 
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事件 处 理 函 数 


事件 处 理 函 数 的 作用 是 ， 在 特定 事件 发 生 时 调用 特定 的 JavaScript 代码 。 例 如 ， 如 果 想 在 鼠 
标 指针 甚 停 在 某 个 元 素 上 时 触发 一 个 动作 ， 就 需要 使 用 onmouseover 事件 处 理 函数 ， 如 果 想 在 鼠 
标 指 针 离开 其 个 元 素 时 触发 一 个 动作 ， 就 需要 使 用 onmouseout 事件 处 理 函 数 。 在 我 的 图 片 库 里 ， 
我 想 在 用 户 点 击 某 个 链接 时 触发 一 个 动作 ， 所 以 需要 使 用 onclick 事件 处 理 函 数 。 

需要 注意 的 是 showPic() 函 数 需 要 一 个 参数 : 一 个 带 有 href 属性 的 元 素 市 点 参数 。 当 我 把 
onclick 事件 处 理 函 数 肉 入 到 一 个 链接 中 时 ， 需 要 把 这 个 链接 本 身 用 作 showPic 函数 的 参数 。 

有 个 非常 简单 有 效 的 办 法 可 以 做 到 这 一 点 : 使 用 this 关键 字 。 这 个 关键 字 在 这 儿 的 含义 是 
“这 个 对 象 ”。 具 体 到 当前 的 例子 ，this 表示 “这 个 <a> 元 素 市 点 ”: 

showPic(this) 

综 上 所 述 ， 我 将 使 用 onclick 事件 处 理 函 数 来 给 链接 添加 行为 。 添 加 事件 处 理 函 数 的 语法 如 
下 所 示 : 

event = "Javascript statement(s)" 

请 注意 ，JavaScript 代码 包含 在 一 对 引号 之 间 。 我们 可 以 把 任意 数量 的 JavaScript 语句 放 在 这 
对 引号 之 间 ， 只 要 把 各 条 语句 用 分 号 隔 开 即 可 。 

下 面 这 样 onclick 事件 就 可 以 调用 snowPic 方法 了 : 

onclick = "showPic(this);" 

不 过 ,如 果 仅 仅 把 事件 处 理 国 数 放 到 图 片 列表 的 一 个 链接 中 , 我 们 会 遇 到 一 个 问题 : 点 击 这 个 
链接 时 ， 不 仅 showPic 函数 被 调用 ， 链 接 被 点 击 的 默认 行为 也 会 被 调用 。 这 意味 着 用 户 还 是 会 被 带 
到 图 片 查看 窗口 ， 而 这 是 我 不 希望 发 生 的 。 我 需要 阻止 这 个 默认 行为 被 调用 。 

让 我 们 近 距 离 了 解 一 下 事件 处 理 函 数 的 工作 机 制 。 在 给 某 个 元 素 添加 了 事件 处 理 函 数 后 , 一 
日 事件 发 生 ， 相 应 的 JavaScript 代码 就 会 得 到 执行 。 被 调用 的 JavaScript 代码 可 以 返回 一 个 值 ， 
这 个 值 将 被 传递 给 那个 事件 处 理 函 数 。 例 如 ， 我 们 可 以 给 某 个 链接 添加 一 个 onclick 事件 处 理 函 
数 ， 并 让 这 个 处 理 函 数 所 触发 的 JavaScript 代码 返回 布尔 值 true 或 false。 这 样 一 来 ， 当 这 个 链 
接 被 点 击 时 ， 如果 那 段 JavaScript 代码 返回 的 值 是 true，onclick 事件 处 理 函 数 就 认为 “这 个 链接 
被 点 击 了 ”; 有 反之, 如果 返 回 的 值 是 false, onclick 事件 处 理 函 数 就 认为 “这 个 链接 没有 被 点 击 ”。 

可 以 通过 下 面 这 个 简单 测试 去 验证 这 一 结论 : 

<a href="http://www.example.com" onclick="return false;">Click me</a> 

当 点 击 这 个 链接 时 ， 因 为 onclick 事件 处 理 函 数 所 触发 的 JavaScript 代码 返回 给 它 的 值 是 
false， 所 以 这 个 链接 的 默认 行为 没有 被 触发 。 

同样 道理 ， 如 果 像 下 面 这 样 ， 在 onclick 事件 处 理 函 数 所 触发 的 JavaScript 代码 里 增加 一 条 
return false 语句 ， 就 可 以 防止 用 户 被 带 到 目标 链接 窗口 : 

onclick = "showpic(this); return false;" 


下 面 是 最 终 完成 的 onclick 事件 处 理 函 数 在 图 片 库 HTML 文档 里 的 样子 : 
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<li> 

<a href="images/fireworks.jpg" onclick="showpic(this); 
ww return false;" title="A fireworks display">Fireworks</a> 
</1i> 


接 下 来 , 我 要 在 图 片 列表 的 每 个 链接 上 添加 这 个 事件 处 理 函 数 。 这 当然 有 些 麻烦 , 但 眼下 只 


能 这 么 做 , 我们 将 在 第 6 章 介 绍 一 个 避免 这 种 麻烦 的 办 法 。 下面 的 标记 文档 是 我 一 个 个 手动 添加 
onclick 事件 处 理 函 数 之 后 的 样子 : 


如 图 


<1i> 
<a href="images/fireworks.jpg” onclick="showpic(this); 
w return false;" title="A fireworks display">Fireworks</a> 
</1i> 
<1i> 
«<a href="images/coffee.jpg” onclick="showPic(this); 
w= return false;" title="A cup of black coffee">Coffee</a> 
</1i> 
<1i> 
<a href="images/rose.jpg" onclick="showpic(this); return false;" 
加 title="A red, red Tose ">Rose</ay> 
</1i> 
<1i> 
<a href="images/bigben. jpg" onclick="showPic(this); return false;" 
w= title="The famous clock">Big Ben</a> 
</1i> 


现在 , 把 这 个 页 面 加 载 到 Web 浏览 器 里 , 你 将 看 到 一 个 能 够 正常 工作 的 “JavaScript 图 片 库 ”: 
4-3 所 示 ， 不 管 点 击 图 片 列表 里 的 哪个 链接 ， 都 能 在 这 个 页 面 里 看 到 相应 的 图 片 。 


滑 


到 4-3 


4.4 对 这 个 函数 进行 扩展 


在 一 个 网 页 上 切换 显示 不 同 的 图 片 并 不 是 什么 新 鲜 事 。 早 在 W3C 推出 它们 标准 化 的 DOM 


和 JavaScript 语言 之 前 ,有 着 这 类 效果 的 网 页 和 脚本 就 已 经 出 现 了 , 如 今 更 是 得 到 了 广泛 的 流行 。 


在 这 种 情形 下 ,如果 想 让 自己 与 众 不 同 , 就 必须 另辟蹊径 。 有 没有 想 过 在 同一 个 网 页 上 切换 
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显示 不 同 的 文本 ? 利用 JavaScript 语 言 和 DOM， 确 实 可 以 做 到 这 一 点 。 

图 片 库 文档 里 的 每 个 图 片 链接 都 有 一 个 title 属性 。 可 以 把 这 个 属性 取出 来 并 让 它 和 相应 的 
图 片 一 同 显示 在 网 页 上 。title 属性 的 值 可 以 用 getAttribute 轻而易举 地 得 到 : 

var text = whichpic.getAttribute("title"); 

光 提 取 title 属性 的 值 还 不 够 ,我 们 还 需要 把 它 插入 到 HTML 文档 中 。 为 完成 这 一 工作 , 我 
需要 用 到 儿 个 新 的 DOM 属性。 


4.4.1 childNodes 属性 


在 一 棵 节点 树 上 ，childNodes 属性 可 以 用 来 获取 任何 一 个 元 素 的 所 有 子 元 素 ， 它 是 一 个 包含 这 
个 元 素 全 部 子 元 素 的 数组 : 

element.childNodes 

假设 需要 把 某 个 文档 的 body 元 素 的 全 体 子 元 素 检 索 出 来 。 首 先 ， 我们 使 用 getElementsBy- 
TagName 得 到 body 元 素 。 因 为 每 份 文档 只 有 一 个 body 元 素 ， 所 以 它 将 是 getElementsByTagName 
("body") 方 法 所 返回 的 数组 中 的 第 一 个 (也 是 唯一 一 个 ) 元 素 : 

Var body_element = document.getElementsByTagName("body" )[0]; 

现在 , 变量 body element 已 经 指向 了 那个 文档 的 body 元 素 。 接 下 来 ,可 以 用 如 下 所 示 的 语法 
获取 body 元 素 的 全 体 子 元 素 : 

body_element.childNodes 

这 显然 要 比 像 下 面 这 样 写 简 明 得 多 : 

document .getElementsByTagName("body" )[0].childNodes 

现在 ， 已 经 知道 如 何 获取 body 元 素 的 全 体 子 元 素 了 ， 接 下 来 看 看 这 些 信息 的 用 途 。 

首先 ， 可 以 精确 地 查 出 body 元 素 一 共有 多 少 个 子 元 素 。 因 为 cnildNodes 属性 返回 的 是 一 个 
数组 ， 所 以 用 数组 的 length 属性 就 可 以 知道 它 所 包含 的 元 素 的 个 数 : 

body element.childNodes.1length; 

现在 把 下 面 这 个 小 函数 添加 到 showPic.js 文件 里 : 

function countBodyChildren() { 


var body element = document.getElementsByTagName("body" )[0]; 
alert (body element.childNodes.1length); 


这 个 简单 的 小 函数 将 弹出 一 个 alert 对 话 框 ， 显 示 body 元 素 的 子 元 素 的 总 个 数 。 

我 想 让 这 个 函数 在 页 面 加 载 时 执行 , 而 这 需要 使 用 on10ad 事件 处 理 函 数 。 把 下 面 这 条 语句 添 
加 到 代码 段 的 末尾 : 

window.onload = countBodyChildren; 

这 条 语句 的 作用 是 在 页 面 加载 时 调用 countBodyChildren 函数 。 

在 Web 浏览 器 里 刷新 gallery.html 文件 。 你 会 看 到 一 个 alert 对 话 框 ， 其 显示 的 内 容 是 body 
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元 素 的 子 元 素 的 总 个 数 。 这 个 数字 很 可 能 会 让 你 大 吃 一 惊 。 
4.4.2 nodeType 属性 


根据 gallery.html 文件 的 结构 ，body 元 素 应 该 只 有 3 个 子 元 素 : 一 个 hi 元 素 、 一 个 ul 元 素 
和 一 个 img 元 素 。 可 是 ，countBodyChildren() 函 数 给 出 来 的 数字 却 远 大 于 此 ， 这 是 因为 文档 树 
的 节点 类 型 并 非 只 有 元 素 节 点 一 种 。 

由 childNodes 属性 返回 的 数组 包含 所 有 类 型 的 节点 ,而 不 仅仅 是 元 素 节 点 。 事实 上 , 文档 里 
几乎 每 一 样 东西 都 是 一 个 节点 ， 甚 至 连 空 格 和 换行 符 都 会 被 解释 为 节点 ， 而 它们 也 全 都 包含 在 
childNodes 属性 所 返回 的 数组 当中 。 

因 些 ，countBodyChildren 的 返回 结果 才 会 这 么 大 。 

还 好 , 每 一 个 节点 都 有 nodeType 属性 。 这 个 属性 可 以 让 我 们 知道 自己 正在 与 哪 一 种 节点 打 交 
差 芽 的 一 点 是 nodeType 的 值 并 不 是 英文 。 

用 下 面 的 语法 获取 节点 的 nodeType 属性 : 

node.nodeType 

nodeType 的 值 是 一 个 数字 而 不 是 像 “element” 或 “attribute” 那 样 的 英文 字符 串 。 

为 了 验证 这 一 点 ， 把 countBodyChildren 中 的 alert 语句 赫 换 为 下 面 这 条 语句 ， 这 样 一 来 ， 我 
们 就 可 以 知道 body element 元 素 的 nodeType 属性 了 : 

alert(body element.nodeType); 

在 Web 六 览 器 里 刷新 9allery.html 文件 ， 将 看 到 一 个 显示 数字 “1” 的 alert 对 话 框 。 换 名 
话说 ， 元 素 节点 的 nodeType 属性 值 是 1。 
nodeType 属性 总 共有 12 种 可 取 值 ， 但 其 中 仅 有 3 种 具有 实用 价值 。 

D 元 素 节 点 的 nodeType 属性 值 是 1。 
D 属性 节点 的 nodeType 属性 值 是 2。 
D 文本 节点 的 nodeType 属性 值 是 3。 

这 就 意味 着 ,可 以 让 函数 只 对 特定 类 型 的 节点 进行 处 理 。 例 如 ， 完 全 可 以 编写 出 一 个 只 处 理 

元 素 节 点 的 函数 。 


4.4.3 ”在 标记 里 增加 一 段 描述 


为 增强 我 的 图 片 库 函 数 ， 我 决定 维护 一 个 文本 市 点 。 我 想 在 显示 图 片 时 ， 把 这 个 文本 市 点 
的 值 奉 换 成 目标 图 片 链 接 的 title 的 值 。 

首先 ， 需 要 为 目标 文本 安排 显示 位 置 。 我 在 9allery.html 文件 里 增加 一 个 新 的 文本 段 。 我 把 
它 安排 在 <img> 标 签 之 后 ， 为 它 设置 一 个 独一无二 的 id 值 ， 这 样 就 能 在 JavaScript 函数 里 方便 地 
引用 它 : 

<p id="description">Choose an image.</p> 


上 面 这 条 语句 将 把 <p> 元 素 的 id 属性 设置 为 description (描述 )， 这 个 id 可 以 让 这 个 元 素 的 
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用 途 一 目 了 然 。 如 图 4-4 所 示 ， 包 含 在 此 元 素 里 的 文本 现在 是 “Choose an image.”， 你 能 看 到 添 
加 了 新 段落 。 


> 


Snapshots 


Image 


Gallery 


邮 


图 4-4 


我 想 达到 的 效果 是 : 在 某 个 图 片 链接 被 点 击 时 , 不仅 要 把 “ 占 位 符 ” 图 片 替换 为 那个 链接 的 
href 属性 所 指向 的 图 片 ， 还 要 把 这 段 文 本 同时 替换 为 那个 图 片 链接 的 title 属性 值 。 为 了 实现 这 
一 效果 ， 对 showPic 函数 要 做 一 些 改进 。 


4.4.4 用 JavaScript 改变 这 段 描述 


在 图 片 链接 被 点 击 时 ， 为 了 能 动态 地 用 图 片 的 title 替换 掉 图 片 说 明 ， 我 需要 对 showPic 国 
数 做 一 些 修 改 。 
下 面 是 showPic 函数 现在 的 样子 : 


function showpic(whichpic) { 
var source = whichpic.getAttribute("href"); 
var placeholder = document. getElementById(" placeholder"); 
placeholder. setAttribute("src",source); 


首先 , 我 需要 在 showPic() 函 数 里 增加 一 条 语句 来 获取 whichpic 对 象 的 title 属性 值 。 我 将 把 
这 个 值 存 入 text 变量 。 这 件 事 可 以 轻而易举 地 利用 getAttribute 完成 : 

var text = whichpic.getAttribute("title"); 

接 下 来 ， 为 了 能 方便 地 引用 id 为 description 的 文本 段落 ， 我 创建 一 个 新 的 变量 来 存放 它 : 

var description = document.getElementById("description"); 


下 面 是 增加 变量 之 后 的 样子 : 
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function showPic(whichpic) { 
var source = whichpic.getAttribute("href"); 
var placeholder = document.getElementById("placeholder"); 
placeholder.setAttribute("src" ,source); 
var text = whichpic.getAttribute("title"); 
var description = document.getElementById("description"); 


下 一 个 任务 是 实现 文本 的 切换 。 
4.4.5 ”nodeValue 属性 


如 果 想 改变 一 个 文本 节点 的 值 ， 那 就 使 用 DOM 提供 的 nodeValue 属性 ， 它 用 来 得 到 (和 设 
置 ) 一 个 节点 的 值 : 

hode ,nodeValue 

但 这 里 有 个 大 家 必须 注意 的 细 方 : 在 用 nodeValue 属性 获取 description 对 象 的 值 时 ， 得 到 的 
并 不 是 包含 在 这 个 段落 里 的 文本 。 可 以 用 下 面 这 条 alert 语句 来 验证 这 一 点 

alert (description.nodeValue); 

这 个 调用 将 返回 一 个 null 值 。<p> 元 素 本 身 的 nodeValue 属性 是 一 个 空 值 , 而 你 真正 需要 的 是 

<p> 元 素 所 包含 的 文本 的 值 。 

包含 在 <p> 元 素 里 的 文本 是 另 一 种 节点 ， 它 是 <p> 元 素 的 第 一 个 子 节 点 。 因 此 ， 你 想 要 得 到 的 
其 实 是 它 的 第 一 个 子 市 点 的 nodevalue 属性 值 。 

下 面 这 条 alert 语句 可 以 显示 你 想 要 的 内 容 : 

alert(description.childNodes[0].nodeValue); 

这 个 调用 的 返回 值 才 是 我 们 正在 寻找 的 “Choose an image.”。 这 个 值 来 自 childNodes 数组 的 
第 一 个 (下 标 是 0) 元 素 。 


4.4.6 firstChild 和 1astChild 属性 


数组 元 素 childNodes[0] 有 个 更 直观 易 读 的 同义词 。 无 论 何 时 何 地 ， 只 要 需要 访问 childNodes 
数组 的 第 一 个 元 素 ， 都 可 以 把 它 写成 firstChild: 

node.firstChild 

这 种 写法 与 下 面 的 写法 完全 等 价 : 

node.childNodes[0] 

这 不 仅 更 加 简短 ， 还 更 加 具有 可 读 性 。 

DOM 还 提供 了 一 个 与 之 对 应 的 lastCchild 属性 : 

node,1astChild 

这 代表 着 childNodes 数组 的 最 后 一 个 元 素 。 如 果 不 想 通 过 1astChild 属性 去 访问 这 个 节点 ， 
将 不 得 不 使 用 如 下 所 示 的 语法 : 


node.childNodes[node.childNodes.1length-1] 
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与 简明 易 懂 的 lastChi1d 相 比 ， 这 么 复杂 的 语法 记号 恐怕 没 人 会 喜欢 。 
4.4.7 利用 nodeValue 属性 刷新 这 段 描 


现在 ， 我 们 回 到 showPic 函数 。 我 将 刷新 id 等 于 description 的 <p> 元 素 所 包含 的 文本 市 点 的 
nodeValue 属性 。 

具体 到 这 个 id 等 于 description 的 <p> 元 素 ， 因 为 它 只 有 一 个 子 节 点 ， 所 以 选用 
description.firstchild 属性 和 选用 description.1astChi1d 属性 的 效果 是 完全 一 样 的 。 既 然 如 此 ， 
我 决定 选用 firstChi1d 属性 。 

可 以 把 alert 语句 改写 为 如 下 所 示 的 样子 : 

alert(description.firstChild.nodeValue); 

显示 的 效果 完全 一 样 (都 将 显示 “Choose an image.” 消 息 )， 但 这 里 的 代码 显然 更 容易 阅读 
和 理解 。 

nodeValue 属性 的 用 途 并 非 仅 限于 此 。 它 不 仅 可 用 来 检索 节点 的 值 ,还 可 以 用 来 设置 节点 的 值 ， 
后 一 种 用 途 正 是 我 目前 最 需要 的 。 

还 记得 刚才 在 showPic 函数 里 的 text 变量 吗 ? a ee 点 击 时 ， 
showPic 函数 会 把 这 个 链接 的 title 属性 值 传递 给 text 变量 。 而 我 现在 将 用 text 变量 去 刷新 id 值 
等 于 description 的 那个 <p> 元 素 的 第 一 个 子 节点 的 nodeValue 属性 值 ， 如 下 所 示 : 


description.firstChild.nodeValue = text; 


下 面 是 为 了 改进 showPic() 国 数 而 添加 的 三 条 新 语句 : 


var text = whichpic.getAttribute("title"); 
var description = document.getElementById("description"); 
description.firstChild.nodeValue = text; 


如 果 用 日 常用 语 来 说 ， 这 三 条 语句 的 含义 依次 是 

口 当 图 片 库 页 面 上 的 某 个 图 片 链接 被 点 击 时 ， 这 个 链接 的 title 属性 值 将 被 提取 并 保存 到 
text 变量 中 ， 

口 得 到 id 是 "description" 的 <p> 元 素 ， 并 把 它 保存 到 变量 description 里 ; 

口 把 description 对 象 的 第 一 个 子 节点 的 nodeValue 属性 值 设 置 为 变量 text 的 值 。 

下 面 是 最 终 的 代码 清单 : 


function showPic(whichpic) { 
var source = whichpic.getAttribute("href"); 
var placeholder = document. getElementById(™ placeholder"); 


placeholder,. setAttribute("src",source); 

var text = whichpic,getAttribute("title"); 

var description = document.getElementById("description"); 
description.firstChild.nodeValue = text; 


把 改进 后 的 showPic() 函 数 存 入 showPic.js 文件 , 然后 在 浏览 器 里 刷新 gallery.htm] 文档 ， 你 
就 可 以 看 到 这 个 扩展 功能 了 。 现在 , 点 击 这 个 网 页 上 的 某 个 图 片 链 接 时 , 你 将 看 到 两 种 效果 :“ 占 
位 符 ” 图 片 被 奉 换 为 这 个 链接 所 指向 的 一 张 新 图 片 , 同时 描述 性 文字 也 被 替换 为 这 个 链接 的 title 
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属性 值 ， 如 图 4-5 所 示 。 


你 可 以 在 http://friendsofed.com/ 网 站 上 找到 图 片 库 脚本 文件 和 标记 文档 。 我 在 示例 中 用 到 的 
所 有 图 片 也 可 以 在 那里 找到 , 但 我 建议 大 家 找 一 些 自己 的 图 片 来 测试 这 个 脚本 , 那样 会 更 有 意思 。 
如 果 想 让 这 个 图 片 库 更 美观 ， 可 以 再 给 它 增加 一 个 像 下 面 这 样 的 样式 表 : 


body { 


‘ EE 作 
aa 9 LI 
Snapshots 


ee Fireworks 


。 Rose 
e。 Big Ben 


A red, red rose 


Done 


font-family: “Helvetica","Arial", serif; 


COlor: #333; 


background-color: #ccc; 


margin: 1em 10%; 


} 
hi{ 
COlor: #333; 


background-color: transparent; 


color: #c60; 
background-color: 


font-weight: bold 


transparent; 


Ed 


text-decoration: none; 


} 
UL 

padding: 0; 
li{ 
float: left; 
padding: 1em; 
list-style: none; 


img { 
display:block; 
clear:both; 


} 
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请 把 这 些 CSS 代码 存 入 1ayout .css 文件 ， 并 把 这 个 文件 存放 到 styles 子 目录 里 。 然 后 ,在 
gallery.html 文档 的 <head> 部 分 用 一 个 <1ink> 标 签 来 引用 这 个 文件 ， 如 下 所 示 ; 


<“!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"” /> 
<title>Image Gallery</title> 
<link rel="stylesheet" href="styles/layout.css” media="screen" /> 
«</head> 
<body> 
<h1>Snapshots</h1> 
<ul> 
<1i> 
<a href="images/fireworks.jpg" title="A fireworks display" 
ww onclick="showPic(this); return false;">Fireworks</a> 
</1i> 
<1i> 
<a href="images/coffee.jpg" title="A cup of black coffee" 
ww onclick="showPic(this); return false;">Coffee</a> 
</l1i> 
<1i> 
<a href="images/rose.jpg" title="A red, red rose" 
w onclick="showPic(this); return false;">Rose</a> 
</]i> 
<1i> 
<a href="images/bigben.jpg" title="The famous clock" 
w onclick="showPic(this); return false;">Big Ben</ay> 
</1i> 
</ul> 
<img id="placeholder" src="images/placeholder.gif" alt="my image gallery" /> 
<p id="description">Choose an image.</p> 
«script src="scripts/showpic.js"></script> 
</body> 
</html> 


4-6 是 图 片 库 的 显示 效果 。 


铺 关 介 "ee 


Snapshots 


Fireworks Coffee Rose gigBen 


The famous clock 
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4.5 小结 


本 章 介绍 了 一 个 简单 的 JavaScript 应 用 案例 ， 还 介绍 了 DOM 提供 的 几 个 新 属性 ， 它 们 是 : 
DO childNodes 
DQ nodeType 
D nodeValue 
DQ firstChild 
DO lastCchild 
本 章 的 学 习 重 点 有 两 个 : 一 是 如 何 利 用 DOM 所 提供 的 方法 去 编写 图 片 库 脚 本 ， 二 是 如 何 利 
用 事件 处 理 函 数 把 JavaScript 代码 与 网 页 集成 在 一 起 。 

从 表面 上 看 , 我 们 的 图 片 库 已 经 大 获 成 功 , 但 它 实际 上 还 有 许多 地 方 值得 改进 ,而 那 将 是 随 
后 两 章 里 的 讨论 重点 。 

下 一 章 将 介绍 一 些 JavaScript 脚本 编程 方面 的 最 佳 实践 ， 你 会 从 中 领悟 这 样 一 个 道理 : 达成 
目标 的 过 程 与 目标 本 身 同样 重要 。 

第 6 章 我 们 将 把 这 些 最 佳 编 程 实践 应 用 到 图 片 库 脚 本 上 。 


咒 
Fi 
将 
潍 


本 章 内 容 

口 平稳 退化 : 确保 网 页 在 没有 JavaScript 的 情况 下 也 能 正常 工作 。 

口 分 离 JavaScript: 把 网 页 的 结构 和 内 容 与 JavaScript 脚本 的 动作 行为 分 开 。 
口 向 后 兼容 性 : 确保 老 版 本 的 浏览 器 不 会 因为 你 的 JavaScript 脚本 而 死 掉 。 
口 性 能 考虑 : 确定 脚本 执行 的 性 能 最 优 。 


JavaScript 语言 和 DOM 构成 了 一 个 功能 非常 强大 的 组 合 ,但 问题 的 关键 是 你 能 否 恰到好处 地 
运用 它们 所 提供 的 功能 。 本 章 将 介绍 一 些 最 佳 实践 ， 帮 助 你 保证 编写 出 来 的 脚本 不 会 与 你 的 愿望 


5.1 过 去 的 错误 
在 讨论 最 佳 实践 之 前 ， 先 来 了 解 一 下 出 问题 的 原因 。 
5.1.1 不 要 怪罪 JavaScript 


易学 易 用 的 技术 就 像 一 把 双 刃 剑 。 因 为 容易 学 习 和 掌握 ,它们 往往 会 在 很 短 的 时 间 内 就 为 人 
们 广泛 接受 ， 但 也 往往 意味 着 缺乏 高 水 平 的 质量 控制 措施 。 

HTML 语言 就 是 一 个 很 好 的 例子 。 万维网 之 所 以 会 出 现 爆炸 性 的 增长 , HTML 语言 易学 易 用 
的 特点 是 无 可 否认 的 一 个 原因 。 人 们 只 需 花 费 很 短 的 时 间 就 能 掌握 HIML 语言 的 基本 知识 ，3 
迅速 地 创建 出 各 种 各 样 的 网 页 。 事 实 上 ， 随 着 “所 见 即 所 得 ”网 页 设计 工具 的 出 现 和 流行 ， 有 些 
人 可 能 连 一 行 HTML 标记 都 没有 见 过 就 成 了 网 页 设计 大 军 中 的 一 员 。 

因此 产生 的 一 个 不 良 后 果 是 ， 绝 大 多 数 网 页 都 编写 得 很 糟糕 ， 甚 至 不 做 标记 合法 性 检查 。 因 
此 , 软件 三 商 不 得 不 让 它们 的 浏览 器 以 尽 可 能 宽松 的 方式 去 处 理 网 页 。 每 种 浏览 器 都 有 相当 一 部 
分 代码 专门 用 来 处 理 那 些 含糊 不 清 的 HTML 标记 ， 以 及 猜测 网 页 的 创作 者 们 到 底 想 如 何 呈 现 网 
页 


~o 


理论 上 讲 ， 在 如 今 的 Web 上 有 数 十 亿 计 的 HTML 文档 ; 但 事实 上 ， 这 些 文档 中 只 有 一 少 前 
分 有 着 良好 的 结构 。 这 种 历史 遗留 问题 使 得 XHTML 和 CSS 等 新 技术 在 Web 上 的 推广 和 应 用 遇 
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到 了 很 大 的 阻力 。 易 学 易 用 的 HTML 语言 既是 万 维 网 的 福音 ， 又 是 它 的 吐 梦 。 

与 HTML 语言 相 比 ，JavaScript 语言 的 生存 环境 的 要 求 要 苛刻 得 多 。 如 果 JavaScript 代码 不 
符合 语法 规定 ，JavaScript 解释 器 (对 Web 应 用 而 言 就 是 浏览 器 ) 将 拒绝 执行 它们 并 报错 ， 而 浏 
览 器 在 遇 到 不 符合 语法 规定 的 HTML 代码 时 ， 则 会 千方百计 地 将 其 呈现 出 来 。 尽 管 如 此 ， 在 如 
今 的 Web 上 还 是 充斥 着 质量 低劣 的 JavaScript 代码 。 

许多 网 页 设计 者 并 不 舍得 花费 时 间 去 学 习 JavaScript 语言 ， 而 只 是 把 一 些 现成 的 JavaScript 
代码 直接 剪贴 到 HIMEL 文档 里 以 使 网 页 更 加 丰富 多 彩 。 事 实 上 ，JavaScript 语言 诞生 后 不 入 ， 市 
场 上 就 出 现 了 许多 能 让 人 们 把 JavaScript 代码 片段 嵌入 或 关联 到 HTML 文档 的 “所 见 即 所 得 ”的 
网 页 设计 工具 。 

其 实 , 即使 没有 那些 “所 见 即 所 得 ”的 网 页 设计 工具 , 把 JavaScript 代码 衣 入 或 关联 到 HTML 
文档 也 不 是 难事 。 有 许多 网 站 和 书刊 专门 提供 各 种 现成 的 JavaScript 函数 并 号 称 便于 使 用 。 一 时 
间 ,“ 剪 切 和 粘贴 ”成 了 编写 JavaScript 脚本 的 代名词 。 

不 幸 的 是 ， 这 些 现成 的 JavaScript 函数 里 有 很 多 对 问题 考虑 得 并 不 周全 。 从 表面 上 看 ， 它 们 
都 能 完成 自己 的 任务 并 给 网 页 带 来 新 颖 动人 的 交互 效果 ; 但 在 实际 应 用 中 , 它们 当中 只 有 很 少 一 
部 分 能 够 在 JavaScript 被 禁用 时 对 网 页 的 行为 做 出 妥善 的 安排 。 很 多 时 候 ， 一 旦 浏览 器 不 支持 或 
禁用 了 JavaScript 解释 功能 ， 那 些 质量 低劣 的 脚本 就 会 导致 用 户 无 法 浏览 相应 的 网 页 其 至 整个 网 
站 。 因 为 这 类 问题 频繁 发 生 ， 没 过 多 久 ,“JavaScript” 就 在 许多 人 的 脑海 里 成 为 了 “网 页 无 法 访 
问 ” 的 同义词 。 

事实 上 ，JavaScript 与 “网 页 无 法 访问 ”无 任何 必然 的 联系 ， 网 页 能 否 访问 完全 取决 于 如 何 应 
用 JavaScript。 一 首 老 歌 中 这 样 写 道 : 不 在 于 你 做 什么 ， 只 在 于 你 怎么 做 。 


5.1.2 ”Flash 的 遭遇 


客观 地 讲 ， 没 有 不 好 的 技术 ， 只 有 没有 用 好 的 技术 。JavaScript 的 坎坷 遭遇 让 我 不 禁 想起 了 
另 一 种 被 人 们 滥用 的 技术 : Adobe 公司 研发 的 Flash。 

现在 ， 有 不 少 人 一 提起 Flash 就 会 想到 烦人 的 前 导 页 面 、 超 长 的 下 载 时 间 和 随时 都 有 可 能 
问题 的 浏览 体验 。 这 些 恶 劣 印象 其 实 与 Flash 毫 不 相干 ， 它 们 都 是 由 那些 质量 低劣 的 实现 脚本 造 
成 的 。 

把 Flash 与 超 长 的 下 载 时 间 联 系 在 一 起 很 不 公平 ， 因 为 制作 短小 精 悍 的 矢量 图 形 和 视频 片段 
本 是 Flash 技术 的 强项 之 一 。 利 用 Flash 技术 制作 一 些 视频 片段 来 介绍 自己 的 网 站 是 一 个 很 好 的 
创意 , 但 当 这 种 做 法 成 为 一 种 潮流 时 ， 这 类 视频 片段 的 数量 越 来 越 多 、 体 积 也 越 来 越 大 ,网 页 的 
下 载 时 间 也 不 可 避免 地 变 得 越 来 越 长 。 此 时 ，Flash 要 想 洗刷 掉 自 己 身上 的 恶名 谈何容易 。 

类 似 地 ，JavaScript 本 是 一 种 能 让 网 页 变 得 易于 访问 的 技术 ， 然 而 它 却 也 有 着 降低 网 站 可 用 
性 和 可 访问 性 的 坏 名 声 。 

正如 物理 学 中 的 运动 与 惯性 定律 所 描述 的 那样 ， 如 果 人 们 在 开始 使 用 一 种 新 技术 时 没有 经 
过 深思 熟 虑 ， 而 这 种 新 技术 又 很 快 地 成 为 了 一 种 潮流 ， 则 纠正 在 早期 阶段 养 成 的 坏 习 惯 将 会 非 
常 困难 。 
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我 赦 说 ,之 所 以 会 有 那么 多 的 网 站 迫不及待 地 在 网 页 上 骨 入 一 些 毫 无 必要 的 Flash 视频 片段 ， 
是 因为 “大 家 都 有 ， 所 以 我 也 要 有 ”的 心理 而 不 是 因为 实际 应 用 的 需要 。 既 然 别 人 的 网 页 上 有 
Flash 动画 ， 那 么 我 的 网 页 上 也 要 有 Flash 动画 ， 有 无 必要 的 问题 已 无 人 问津 了 。 

JavaScript 也 遭遇 到 了 类 似 的 命运 : 人 们 只 关心 自己 的 网 页 里 有 没有 JavaScript 代码 , 根本 不 
去 考虑 那些 现成 的 (尤其 是 那些 由 “所 见 即 所 得 ”网 页 设计 工具 生成 的 ) JavaScript 函数 本 身 有 
没有 漏洞 ， 以 及 它们 会 不 会 给 网 页 带 来 负面 影响 。JavaScript 代码 被 人 们 剪贴 来 、 剪 贴 去 ， 结 有 果 
和 弄 得 网 上 到 处 都 是 似是而非 的 JavaScript 网 页 ， 却 没 人 想到 应 该 首先 检查 一 下 那些 现成 的 
JavaScript 函数 是 否 还 需要 改进 。 


5.1.3 质疑 一 切 


不 管 你 想 通 过 JavaScript 改变 哪个 网 页 的 行为 ， 都 必须 三 思 而 后 行 。 首 先 要 确认 : 为 这 个 网 
页 增加 这 种 额外 的 行为 是 否 确 有 必要 ? 

网 站 对 JavaScript 的 滥用 已 经 持续 了 相当 长 的 时 间 ， 因 为 滥用 JavaScript 而 给 自己 带 来 种 种 
麻烦 的 网 站 也 绝 不 是 少数 。 例 如 ， 你 可 以 用 JavaScript 脚本 让 浏览 器 窗口 在 屏幕 上 四 处 移动 ， 其 
至 让 浏览 器 窗口 产生 振动 效果 。 

在 所 有 的 JavaScript 特效 当中 , 最 臭名 昭著 的 莫 过 于 那些 在 人 们 打开 网 页 时 弹出 的 广告 窗口 。 对 
JavaScript 和 DOM 脚本 编写 者 来 说 不 幸 的 是 ， 有 不 少 用 户 为 此 干脆 彻底 禁用 了 JavaScript。 浏 览 器 厂 
商 也 在 各 自 的 产品 里 提供 了 种 种 内 建 的 广告 过 滤 机 制 来 解决 这 一 问题 ， 但 广告 还 是 无 孔 不 入 。 

弹出 的 广告 窗口 和 内 容 覆 盖 是 一 个 典型 的 滥用 JavaScript 的 例子 。 从 技术 上 讲 ， 弹 出 窗口 本 


身 是 一 项 很 实用 的 功能 ， 它 解决 了 网 页 设计 工作 中 的 一 个 难题 : 如 何 向 用 户 发 送信 息 。 但 在 实践 
中 ， 频 繁 弹出 的 广告 窗口 却 让 用 户 不 胜 其 烦 。 那 些 弹 出 窗口 必须 由 用 户 关 闭 ， 而 这 往往 会 形成 一 


种 拉锯 战 一 一 用 户 刚 关闭 了 一 个 广告 窗口 ， 屏 幕 上 又 弹出 一 个 。 

那么 ， 这 一 功能 要 如 何 使 用 户 受益 呢 ? 

令 人 感到 欣慰 的 是 ， 这 一 问题 正 越 来 越 受 到 人 们 的 关注 ， 那 些 不 遵循 “用 户 至 上 ”原则 的 网 
站 从 长 远 看 ， 都 在 自 取 火 亡 。 

如 果 要 使 用 JavaScript， 就 要 确认 : 这 么 做 会 对 用 户 的 浏览 体验 产生 怎样 的 影响 ?还 有 个 更 
重要 的 问题 : 如果 用 户 的 浏览 器 不 支持 JavaScript 该 怎么 办 ? 


5.2 平稳 退化 


记 住 , 网 站 的 访问 者 完全 有 可 能 使 用 的 是 不 支持 JavaScript 的 浏览 器 , 还 有 一 种 可 能 是 虽然 
浏览 器 支持 JavaScript， 但 用 户 已 经 禁用 它 了 (比如 ， 因 为 讨厌 看 到 弹出 广告 )。 如 果 没 有 考虑 
到 这 种 情况 ， 人 们 在 访问 你 们 的 网 站 时 就 有 可 能 遇 到 各 种 各 样 的 麻烦 ， 并 因此 不 再 来 访问 你 们 
的 网 站 。 

如 果 正 确 地 使 用 了 JavaScript 脚本 ， 就 可 以 让 访问 者 在 他 们 的 浏览 器 不 支持 JavaScript 的 情 
况 下 仍 能 顺利 地 浏览 你 的 网 站 。 这 就 是 所 谓 的 平稳 退化 (graceful degradation) ， 就 是 说 ， 虽 然 基 
些 功 能 无 法 使 用 ， 但 最 基本 的 操作 仍 能 顺利 完成 。 
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我 们 来 看 一 个 在 新 窗口 里 打开 一 个 链接 的 例子 。 别 担心 : 我 们 将 要 讨论 的 并 不 是 在 网 页 加 载 
时 弹出 新 窗口 。 而 是 在 用 户 点 击 某 个 链接 时 弹出 一 个 新 窗口 。 这 其 实 是 一 项 相当 实用 的 功能 。 例 
如 , 在 许多 电子 商务 网 站 的 结算 页 面 上 都 有 一 些 指 向 服务 条 款 或 是 邮寄 费用 表 的 链接 ， 与 其 让 用 
户 在 点 击 这 些 链 接 时 被 带 离 当前 页 面 , 不 如 让 用 户 仍 停留 在 当前 页 面 , 并 用 一 个 弹出 窗口 来 显示 
相关 信息 。 


注意 ee 况 下 才 使 用 弹出 窗口 ， 因 为 这 将 窑 涉 到 网 页 的 可 访问 性 问题 ， 例 
吕 ， 用 户 使 用 的 屏幕 读 取 软件 无 法 向 用 户 说 明 弹 出 了 窗口 。 因 此 ， 如 果 网 页 上 的 某 个 链 
et 最 好 在 这 个 链接 本 身 的 文字 中 予以 说 明 。 


JavaScript 使 用 window 对 象 的 open() 方 法 来 创建 新 的 浏览 器 窗口 。 这 个 方法 有 三 个 参数 ; 
window.open(url,name, features) 
这 三 个 参数 都 是 可 选 的 。 
D 第 一 个 参数 是 想 在 新 窗口 里 打开 的 网 页 的 URL 地 址 。 如 果 省 略 这 个 参数 ， 屏 幕 上 将 弹出 
一 个 空白 的 浏览 器 窗口 。 
第 二 个 参数 是 新 窗口 的 名 字 。 可 以 在 代码 里 通过 这 个 名 字 与 新 窗口 进行 通信 。 
EO a ee Ae atts pe na 这 些 属性 包括 
Rd et ee ot eh E (工具 条 、 菜 单 
条 、 初 始 显示 位 置 ， 等 等 )。 对 于 这 个 参数 应 该 掌握 以 下 原则 : 新 窗 吕 的 浏览 功能 少 而 
2 

open() 方 法 是 使 用 BOM 的 一 个 好 案例 , 它 的 功能 对 文档 的 内 容 也 无 任何 影响 ( 那 是 DOM 的 
地 盘 )。 这 个 方法 只 与 浏览 环境 (具体 到 这 个 例子 ， 就 是 window 对 象 ) 有 关 。 

下 面 这 个 函数 是 window.open( ) 方 法 的 一 种 典型 应 用 : 


function popUp(winURL) { 
window.open(winURL,"popup", "width=320,height=480"); 


口 


口 


这 个 函数 将 打开 一 个 320 像素 宽 、480 像素 高 的 新 窗口 “popup”。 因 为 我 在 这 个 函数 里 已 为 
新 窗口 命名 ， 所 以 当 把 新 的 URL 地 址 传递 对 此 函数 时 ， 这 个 函数 将 把 新 窗口 里 的 现 有 文档 替换 
为 新 URL 地 址 处 的 文档 ， 而 不 是 再 去 创建 一 个 新 窗口 。 

我 将 把 这 个 函数 存 入 一 个 外 部 文件 。 因 此 ， 当 需要 在 某 个 网 页 里 使 用 此 函数 时 ， 只 要 在 这 
网 页 的 <head> 部 分 用 一 个 <script> 标 签 导 入 那个 外 部 文件 即 可 。 et 
产生 任何 影响 ， 会 影响 到 网 页 的 只 是 : 我 将 如 何 使 用 此 函数 。 

调用 popUp 函数 的 一 个 办 法 是 使 用 伪 协 议 (pseudo-protocol) 。 


5.2.1 “javascript:” 伪 协议 
“ 真 "协议 用 来 在 因特网 上 的 计算 机 之 间 传 输 数据 包 , 如 HITP 协议 (http:/) FTP 协议 (ftp://) 
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等 ， 伪 协议 则 是 一 种 非 标准 化 的 协议 。 javascript” 伪 协议 让 我 们 通过 一 个 链接 来 调用 JavaScript 
下 面 是 通过 “javascript:” 伪 协议 调用 popUp() 函 数 的 具体 做 法 : 
<a href="javascript:popUp( http://www.example.com/');">Example</a> 
这 条 语句 在 支持 “javascript:” 伪 协议 的 浏览 器 中 运行 正常 , 较 老 的 浏览 器 则 会 去 尝试 打开 那 
个 链接 但 失败 ， 支 持 这 种 伪 协 议 但 禁用 了 JavaScript 功能 的 浏览 器 会 什么 也 不 做 。 
总 之 ,在 HTML 文档 里 通过 “javascript:” 伪 协议 调用 JavaScript 代码 的 做 法 非常 不 好 。 


5.2.2 ”内 骸 的 事件 处 理 函 数 


我 们 已 经 在 第 4 章 的 图 片 库 脚 本 见识 过 事件 处 理 函 数 的 用 途 和 用 法 了 : 把 onclick 事件 处 理 
函数 作为 属性 嵌入 <a> 标 签 ， 该 处 理 函 数 将 在 onclick 事件 发 生 时 调用 图 片 切换 函数 。 

这 个 技巧 同样 可 以 用 来 调用 popUp 函数 。 但 当 在 茶 个 链接 里 用 onclick 事件 处 理 函数 去 打开 
新 窗口 时 ， 这 个 链接 的 href 属性 似乎 没有 什么 用 处 一 一 与 这 个 链接 有 关 的 重要 信息 已 经 都 包括 
在 它 的 onclick 属性 里 了 。 这 也 正 是 我 们 经 常会 看 到 如 下 所 示 的 链接 的 原因 : 


<a href="#" onclick="popUp('http://www.example.com/'); 
ww return false;">Examplex</a> 


因为 在 上 面 这 条 HTML 指令 里 使 用 了 return false 语 句 ， 这 个 链接 不 会 真 的 被 打开 。“#” 符 
号 是 一 个 仅 供 文档 内 部 使 用 的 链接 记号 ( 单 就 这 条 指令 而 言 ,“#” 是 未 指向 任何 目标 的 内 部 链 
接 )。 在 某 些 浏 览 器 里 ，“#” 链 接 指向 当前 文档 的 开头 。 把 href 属性 的 值 设置 为 “#” 只 是 为 了 
创建 一 个 空 链 接 。 实 际 工作 全 部 由 onclick 属性 负责 完成 。 

很 遗憾 ， 这 个 技巧 与 用 “javascript:” 伪 协议 调用 JavaScript 代码 的 做 法 同样 糟糕 ， 因 为 它们 
都 不 能 平稳 退化 。 如 果 用 户 已 经 禁用 了 浏览 器 的 JavaScript 功能， 这 样 的 链接 将 写 无 用 处 。 


5.2.3” 谁 关心 这 个 


或 许 你 对 我 反复 强调 “平稳 退化 ”有 些 不 解 : 让 那些 不 支持 或 禁用 了 JavaScript 功能 的 浏览 
器 也 能 顺利 地 访问 你 的 网 站 真 的 那么 重要 吗 ? 

请 想象 一 下 , 有 个 访问 者 来 到 了 你 的 网 站 , 他 总 是 在 浏览 Web 时 则 时 禁用 图 像 和 JavaScript。 
你 肯定 认为 如 今 这 样 的 用 户 已 非常 少见 ， 而 事实 也 正 是 如 此 。 但 这 个 访问 者 非常 重要 。 

你 想象 的 那个 用 户 是 一 个 搜索 机 器 人 (searchbot) 。 搜 索 机 器 人 是 一 种 自动 化 的 程序 ， 它 们 
浏览 Web 的 目的 是 为 了 把 各 种 网 页 添加 到 搜索 引擎 的 数据 库 里 。 各 大 搜索 引擎 都 有 类 似 的 程序 。 
目前 ， 只 有 极 少 数 搜索 机 器 人 能 够 理解 JavaScript 代码 。 所 以 ， 如 果 你 的 JavaScript 网 页 不 能 ; 
稳 退 化 ， 它 们 在 搜索 引擎 上 的 排名 就 可 能 大 受 损害 。 

具体 到 popUp() 国 数 ， 为 其 中 的 JavaScript 代码 预 留 出 退路 很 简单 ， 在 链接 里 把 href 属性 设 
置 为 真实 存在 的 URL 地 址 ， 让 它 成 为 一 个 有 效 的 链接 ， 如 下 所 示 : 


<a href="http://www.example.com/" 
ww onclick="popUp('http://www.example.com'); return false;">Example</a> 


pe 
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因为 URL 地 址 出 现 了 两 次 ， 上面 这 些 代码 显得 有 点 元 长 , 但 我 们 可 以 利用 JavaScript 语言 把 
它 改写 得 简明 一 些 。this 可 以 用 来 代表 任何 一 种 当前 元 素 ， 所 以 可 以 用 this 和 getAttribute() 方 
法 提取 出 nref 属性 的 值 ， RAID: 


<a href=" ‘http: / /Www.example.com/ 
w onclick="popUp(this. i href')); return false;">Example</a> 


老实 说 ， 上 面 这 条 语句 没有 精简 多 少 。 当 前 链接 的 href 属性 还 有 一 个 更 简明 的 引用 办 法 
一 一 使 用 由 DOM 提供 的 this.href 属性 : 


<a href="http://www.example.com/" 
=w onclick="popUp(this.href); return false;">Example</a> 


不 管 采用 哪 种 方法 ， 重 要 的 是 href 属性 现在 已 经 有 了 合法 的 值 。 与 href = "javascript:..." 
或 href ="# 相 比 ， 这 儿 种 变 体 的 效果 要 好 得 多 。 

所 以 ， 在 把 href 属性 设置 为 真实 存在 的 URL 地 址 后 ， 即 使 JavaScript 已 被 禁用 (或 遇 到 了 
搜索 机 )， 这 个 链接 也 是 可 用 的 。 虽 然 这 个 链接 在 功能 上 打 了 点 儿 折 扣 (因为 它 没 有 打开 一 个 新 
窗口 )， 但 它 并 没有 彻底 失效 。 这 是 一 个 经 典 的 “平稳 退化 ”的 例子 
在 本 书 此 前 介绍 的 所 有 技巧 当中 ， 这 个 技巧 是 最 有 用 的 ， 但 它 还 有 改进 的 余地 。 这 个 技巧 
0 每 当 需 要 打开 新 窗口 时 , 就 不 得 不 把 一 些 JavaScript 代码 舱 入 标记 文档 中 。 如 

能 把 包括 事件 处 理 函 数 在 内 的 所 有 JavaScript 代码 全 都 放 在 外 部 文件 里 ， 这 个 技巧 将 更 加 完 


过 


轴 


Fo 


5.3 和 癌 CSS 学 习 


此 前 ， 我 曾 以 JavaScript 和 Flash 为 例 ， 对 技术 会 因为 在 诞生 初期 被 人 们 滥用 而 造成 恶劣 后 
果 的 问题 进行 了 讨论 。 我 们 可 以 从 过 去 的 失误 里 学 到 很 多 东西 。 

不 过 , 还 有 一 些 技术 是 从 一 开始 就 被 人 们 小 心 谨慎 地 使 用 着 的 。 我 们 可 以 从 它们 那里 学 到 更 
多 的 东西 。 


5.3.1 结构 与 样式 的 分 离 


CSS ( 层 又 样式 表 ) 是 一 项 了 不 起 的 技术 。CSS 可 以 让 人 们 对 网 站 设计 工作 中 的 各 个 方面 做 
出 严格 细致 的 控制 。 表面 上 看 ，CSS 技术 并 无 新 内 容 ，CSS 能 做 到 的 用 <table> 和 <font> 等 标签 也 
可 以 做 到 。CSS 技术 的 最 大 优点 是 ， 它 能 够 帮助 你 将 Web 文档 的 内 容 结构 (标记) 和 版 面 设计 
(样式 ) 分 离开 来 。 

我 们 经 常会 遇 到 一 些 几 平 每 个 元 素 都 带 有 style 属性 的 Web 文档 ， 而 这 是 CSS 技术 最 缺乏 
效率 的 用 法 之 一 。 真 正 能 从 CSS 技术 获 益 的 方法 ， 是 把 样式 全 部 转移 到 外 部 文件 中 去 。 

与 JavaScript 和 Flash 相 比 ，CSS 的 “出 生 ” 日 期 要 晚 得 多 。 或 许 是 已 经 从 滥用 JavaScript 和 
Flash 的 后 果 中 吸取 了 教训 的 缘故 ， 网 页 设计 人 员 一 开始 使 用 CSS 时 就 采用 了 一 种 深思 就 虑 、 浙 
进 增强 的 态度 。 

把 文档 的 结构 和 样式 分 为 两 部 分 的 CSS 技术 给 每 个 人 都 带 来 了 方便 。 如 果 你 的 工作 是 编写 
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文档 的 内 容 , 现在 只 要 集中 精力 把 文档 的 内 容 正确 地 标记 出 来 就 行 了 , 用 不 着 再 与 充斥 着 <table> 
和 <font> 等 标签 的 模板 打交道 ， 也 就 用 不 着 再 担心 会 把 文档 的 版 面 设 计 弄 得 一 团 糟 。 如 果 你 的 工 
作 是 设计 网 页 的 版 面 , 现在 只 要 集中 精力 把 诸如 颜色 、 字 体 和 位 置 等 在 一 些 外 部 文件 里 设置 妥当 
就 行 了 ， 而 无 需 再 接触 文档 ， 最 多 只 需要 添加 些 类 或 是 id 属性 。 

作为 CSS 技术 的 突出 优点 ， 文 档 结 构 与 文档 样式 的 分 离 可 以 确保 网 页 都 能 平稳 退化 。 具 备 
CSS 支持 的 浏览 器 固然 可 以 把 网 页 呈现 得 美 仑 美 奥 ， 不 支持 或 禁用 了 CSS 功能 的 浏览 器 同样 可 
以 把 网 页 的 内 容 按 照 正确 的 结构 显示 出 来 。 

按 这 种 原则 使 用 JavaScript 时， 我 们 可 以 从 CSS 身上 借鉴 到 很 多 东西 。 


5.3.2 ”渐进 增强 


在 网 页 设计 人 员 当 中 流传 着 这 样 一 句 格 言 :“ 内 容 就 是 一 切 ”。 如 果 没 有 内 容 , 创建 网 站 还 有 
何 用 ? 

话 虽 如 此 ， 也 不 能 简单 地 把 原始 内 容 发 布 到 网 上 ， 而 不 加 任何 描述 。 内 容 需 要 用 HTML 或 
XHTML 之 类 的 标记 语言 来 描述 。 在 创建 网 站 的 时 候 , 给 内 容 加 上 正确 的 HIML 标记 是 第 一 个 步 
又 ， 或 许 也 是 最 重要 的 步骤 。 我 们 可 以 修正 那 句 格言 为 “标记 恨 好 的 内 容 就 是 一 切 ”。 

只 有 正确 地 使 用 标记 语言 才能 对 内 容 做 出 准确 的 描述 。 各 种 标记 负责 提供 诸如 “这 是 列表 
项 ” “这 是 文本 段落 ”之 类 的 信息 。 如 果 不 使 用 <1i>、<p> 之 类 的 标签 ， 我 们 就 很 难 把 它们 区 分 
开 来 。 

在 给 内 容 加 上 各 种 标记 后 ， 就 可 以 使 用 各 种 CSS 指令 控制 内 容 的 显示 效果 。CSS 指令 构成 
了 一 个 表示 层 。 这 个 表示 层 就 像 是 一 张 透明 的 彩色 薄膜 ， 可 以 包 庄 到 文档 的 结构 上 , 使 文档 的 内 
容 呈 现 出 各 种 色彩 。 但 即使 去 掉 这 个 表示 层 ,文档 的 内 容 也 依然 可 以 访问 (只 是 缺乏 色彩 而 已 )。 

所 谓 “ 渐 进 增强 ”就 是 用 一 些 额 外 的 信息 层 去 包 于 原始 数据 。 按 照 “ 渐 进 增强 ”原则 创建 出 
来 的 网 页 几乎 (如果 不 是 “全 部 ”的 话 ) 都 符合 “平稳 退化 ”原则 。 

类 似 于 CSS, JavaScript 和 DOM 提供 的 所 有 功能 也 应 该 构成 一 个 额外 的 指令 层 。CSS 代码 负 
责 提供 关于 “表示 ”的 信息 ，JavaScript 代码 负责 提供 关于 “行为 ”的 信息 。 行 为 层 的 应 用 方式 
与 表示 层 一 样 。 

要 想 获 得 最 佳 的 “表示 ”效果 ， 就 应 该 把 CSS 代码 从 HTML 文档 里 分 离 出 来 放 在 一 些 外 部 
文件 里 。 像 下 面 这 样 把 CSS 代码 混杂 在 HTML 文档 里 也 不 是 不 可 以 ， 但 这 种 做 法 整 大 于 利 : 

<p style="font-weight: bold; color: red;"> 

Be careful! 

</p> 

更 值得 推荐 的 办 法 是 , 先 把 样式 信息 存 入 一 个 外 部 文件 ， 再 在 文档 的 head 部 分 用 <1ink> 标 签 
来 调用 这 个 文件 : 

.warning { 


font-weight: bold; 
color: red; 
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class 属性 是 样式 与 文档 内 容 之 间 的 联结 纽带 : 


<p class="warning"> 
Be careful! 
</p> 


这 显然 更 容易 阅读 和 理解 而 且 样式 信息 也 更 容易 修改 了 。 例 如 ， 假 设 你 在 100 个 文档 里 使 
用 了 warning 类 来 排版 各 种 警告 信息 ， 而 现在 想 统一 改变 那些 警告 信息 的 显示 效果 ， 比 如 把 它们 
的 颜色 都 从 红色 改 为 蓝 色 。 那 么 ,如果 你 已 经 把 它们 的 表示 层 和 结构 分 开 了 ,就 可 以 很 容易 地 修 
改 样式 了 。 


.warning { 
font-weight: bold; 
color: blue; 


如 果 把 这 个 样式 混杂 在 那 100 个 文档 里 ， 则 不 得 不 进行 大 量 的 “搜索 并 替换 ”操作 。 
显然 , 把 CSS 代码 从 HTML 文档 里 分 离 出 来 可 以 让 CSS 工作 得 最 好 。 这 个 适用 于 CSS 表示 
层 的 结论 同样 适用 于 JavaScript 行为 层 。 


5.4 ”分离 JavaScript 


你 此 前 见 到 的 JavaScript 代码 都 已 经 与 HTML 文档 分 得 很 开 了 。 人 负责 实际 完成 各 项 任务 的 
JavaScript 阔 数 都 已 存 和 人 外 部 文件 ， 问 题 出 现在 内 租 的 事件 处 理沙 数 中 。 

类 似 于 使 用 style 属性 ， 在 HTML 文档 里 使 用 诸如 onclick 之 类 的 属性 也 是 一 种 既 没 有 效率 
又 容易 引发 问题 的 做 法 。 如 果 我 们 用 一 个 “挂钩 ， 就 像 CSS 机 制 中 的 class 或 id 属性 那样 ， 把 
JavaScript 代码 调用 行为 与 HTML 文档 的 结构 和 内 容 分 离开 ， 网 页 就 会 健壮 得 多 。 那 么 ， 可 否 用 
下 面 这 条 语句 来 表明 “ 当 这 个 链接 被 点 击 时 ， 它 将 调用 popUp() 函 数 ” 的 意思 呢 ? 

<a href="http://www.example.com/" class="popup">Examplex</a> 

我 很 高 兴 告诉 大 家 : 完全 可 以 这 样 做 。JavaScript 语 言 不 要 求 事件 必须 在 HTML 文档 里 处 理 ， 
我 们 可 以 在 外 部 JavaScript 文件 里 把 一 个 事件 添加 到 HTML 文档 中 的 某 个 元 素 上 : 

element.event = action... 

关键 是 怎样 才能 把 应 该 获得 这 个 事件 的 元 素 确定 下 来 。 这 个 问题 可 以 利用 class 或 id 属性 
来 解决 。 

如 果 想 把 一 个 事件 添加 到 茶 个 带 有 特定 i 属性 的 元 素 上 ,用 getElementById 就 可 以 解决 问题 : 

getElementById(id).event = action 


如 果 事 情 涉 及 多 个 元 素 ， 我 们 可 以 用 getElementsByTagName 和 getAttribute 把 事件 添加 到 有 
着 特定 属性 的 一 组 元 素 上 。 

具体 步骤 如 下 所 示 。 

(1) 把 文档 里 的 所 有 链接 全 放 入 一 个 数组 里 。 

(2) 遍历 数组 。 

(3) 如 果 某 个 链接 的 class 属性 等 于 popup ,就 表示 这 个 链接 在 被 点 击 时 应 该 调用 popUp() 国 数 。 
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于 是 ， 
A. 把 这 个 链接 的 href 属性 值 传递 给 popUp() 函 数 ， 
B. 取消 这 个 链接 的 默认 行为 ， 不 让 这 个 链接 把 访问 者 带 离 当 前 窗口 。 
下 面 是 实现 上 述 步骤 的 JavaScript 代码 : 
var links = document.getElementsByTagName("a"); 
for (var i=0; i<links.length; i++) { 
if (links[i].getAttribute("class") == "popup") { 
links[i].onclick = function() { 


popUp(this.getAttribute("href")); 
return false; 


} 
} 


以 上 代码 将 把 调用 popUp() 函 数 的 onclick 事件 添加 到 有 关 的 链接 上 。 只 要 把 它们 存 入 一 个 外 
部 JavaScript 文件, 就 等 于 是 把 这 些 操作 从 HTML 文档 里 分 离 出 来 了 ,而 这 就 是 “分 离 JavaScript” 
的 含义 。 

还 有 个 问题 需要 解决 : 如果 把 这 段 代码 存 和 信 外 部 JavaScript 文件 ， 它 们 将 无 法 正常 运行 。 因 
为 这 段 代 码 的 第 一 行 是 : 

var links = document.getElementsByTagName( "a"); 

这 条 语句 将 在 JavaScript 文件 被 加 载 时 立刻 执行 。 如 果 JavaScript 文件 是 从 HTML 文档 的 
<head> 部 分 用 <script> 标 签 调用 的 , 它 将 在 HTML 文档 之 前 加 载 到 浏览 器 里 。 同 样 ， 如果 <script> 
标签 位 于 文档 底部 </body> 之 前 , 就 不 能 保证 哪个 文件 最 先 结束 加 载 (浏览 器 可 能 一 次 加 载 多 个 )。 
因为 脚本 加 载 时 文档 可 能 不 完整 ， 所 以 模型 也 不 完整 。 没 有 完整 的 DOM，getElementsByTagName 
等 方法 就 不 能 正常 工作 。 

必须 让 这 些 代码 在 HTML 文档 全 部 加 载 到 浏览 器 之 后 马上 开始 执行 。 还 好 ，HTML 文档 全 
部 加 载 完 毕 时 将 触发 一 个 事件 ， 这 个 事件 有 它 自己 的 事件 处 理 函 数 。 

文档 将 被 加 载 到 一 个 浏览 器 窗口 里 ，document 对 象 又 是 window 对 象 的 一 个 属性 。 当 window 
对 象 触 发 on1oad 事件 时 ，document 对 象 已 经 存在 。 

我 将 把 我 的 JavaScript 代码 打包 在 prepareLinks 国 数 里 ， 并 把 这 个 国 数 添加 到 window 对 象 的 
onload 事件 上 去 。 这 样 一 来 ，DOM 就 可 以 正常 工作 了 : 


window.onload = prepareLinks; 
function prepareLinks() { 
var links = document.getElementsByTagName("a"); 
for (var i=0; i<links.length; i++) { 
if (links[i].getAttribute("class") == "popup") { 
links[i].onclick = function() { 
popUp (this.getAttribute("href")); 
return false; 
} 
} 
} 
} 


别 忘记 把 popUp 函数 也 保存 到 那个 外 部 JavaScript 文件 里 去 : 
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function popUp(winURL) { 
window.open(winURL,"popup" , "width=320,height=480" ); 


这 是 一 个 非常 简单 的 例子 ,但 它 演示 了 怎样 才能 成 功 地 把 行为 与 结构 分 离开 来 。 在 第 6 章 ， 
我 还 会 介绍 儿 种 可 以 在 文档 加 载 时 把 事件 添加 到 元 素 上 去 的 巧妙 办 法 。 


5.5 向 后 兼容 


正如 前 面 反 复 强调 的 那样 ， 你 的 网 站 的 访问 者 很 可 能 未 启用 JavaScript 功能 。 此 外 ， 不 同 的 
浏览 器 对 JavaScript 的 支持 程度 也 不 一 样 。 绝 大 多 数 浏览 器 都 能 或 多 或 少 地 支持 JavaScript， 而 绝 
大 多 数 现代 的 浏览 器 对 DOM 的 支持 都 非常 不 错 。 但 比较 古老 的 浏览 器 却 很 可 能 无 法 理解 DOM 
提供 的 方法 和 属性 。 因 此 ， 即 使 某 位 用 户 在 访问 你 的 网 站 时 使 用 的 是 支持 JavaScript 的 浏览 器 ， 
某 些 脚本 也 不 一 定 能 正常 工作 。 


5.5.1 ”对象 检测 


针对 这 一 问题 的 最 简单 的 解决 方案 是 ， 检 测 浏 览 器 对 JavaScript 的 支持 程度 。 这 有 点 儿 像 游 
乐园 里 的 警告 牌 :“ 你 必须 达到 这 一 身高 才能 参与 这 项 游乐 活动 "。 换 句 话 说 , 需要 在 DOM 脚本 
里 表达 出 下 面 这 个 含义 :“ 你 必须 理解 这 么 多 的 JavaScript 语言 才能 执行 这 些 语句 ”。 

这 个 解决 方案 很 容易 实现 ， 只 要 把 某 个 方法 打包 在 一 个 计 语 句 里 ， 就 可 以 根据 这 条 if 语句 
的 条 件 表达 式 的 求 值 结果 是 true (这 个 方法 存在 ) 还 是 false (这 个 方法 不 存在 ) 来 决定 应 该 采 
取 怎 样 的 行动 。 这 种 检测 称 为 对 象 检测 (object detection) 。 第 2 章 介绍 过 ， 几 乎 所 有 的 东西 〈 包 
括 各 种 方法 在 内 ) 都 可 以 被 当做 对 象 来 对 待 , 而 这 意味 着 我 们 可 以 容易 地 把 不 支持 某 个 特定 DOM 
方法 的 浏览 器 检测 出 来 : 


if (method) { 
statements 


例如 ， 如 果 有 一 个 使 用 了 getElementById() 方 法 的 函数 ， 就 可 以 在 调用 getElementById() 方 法 
之 前 先 检查 用 户 所 使 用 的 浏览 器 是 否 支持 这 个 方法 。 在 使 用 对 象 检测 时 , 一 定 要 删 掉 方 法 名 后 面 
的 圆 括 号 ， 如 果 不 删 掉 ， 测 试 的 将 是 方法 的 结果 ， 无 论 方法 是 否 存 在 。 


function myFunction() { 
if (document.getElementById) { 
statements using getElementById 


} 

} 
因此 ， 如 果 某 个 浏览 器 不 支持 getElementById() 方 法 ， 它 就 永远 也 不 会 执行 使 用 此 方法 的 语句 。 

这 个 解决 方案 的 唯一 不 足 是 ， 如 此 编写 出 来 的 函数 会 增加 一 对 花 括 号 。 如 果 需 要 在 函数 里 检 
测 多 个 DOM 方法 和 /或 属性 是 否 存在 , 这 个 函数 中 最 重要 的 语句 就 会 被 深 埋 在 一 层 又 一 层 的 花 括 
号 里 。 而 这 样 的 代码 往往 很 难 阅读 和 理解 。 

把 测试 条 件 改 为 “如 果 你 不 理解 这 个 方法 ， 请 离开 ” 则 更 简单 。 

为 了 把 测试 条 件 从 “如 果 你 理解 ……” 改 为 “如 果 你 不 理解 ……”， 需 要 使 用 “逻辑 非 ” 操 
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作 符 ， 这 个 操作 符 在 JavaScript 语言 里 表示 为 一 个 惊叹 号 : 

if (!method) 

测试 条 件 中 的 “…… 请 离开 ”可 以 用 一 条 return 语句 来 实现 。 因 为 这 相当 于 中 途 退 出 函数 ， 
所 以 让 它 返回 布尔 值 false 比较 贴切 。 用 来 测试 getElementById 是 否 存在 的 语句 如 下 所 示 : 


if (!document.getElementById) { 
return false; 


因为 花 括号 部 分 只 有 return false 一 条 语句 ， 我 们 可 以 把 它 简 写成 一 行 : 
if (!document.getElementById) return false; 
如 有 果 需 要 测试 多 个 方法 或 属性 是 否 存在 ， 可 以 用 “逻辑 或 ”操作 符 将 其 合并 ， 这 个 操作 符 在 
JavaScript 语言 里 表示 为 两 个 紧 线 符 号 。 如 下 所 示 : 
if 〈!document .getElementById || !document.getElementsByTagName) return false; 
如 果 这 是 游乐 园 里 的 一 块 警告 牌 的 话 ， 它 的 意思 是 “如 果 你 不 理解 getElementById 和 
getElementsByTagName， 你 就 不 能 参与 这 项 游乐 活动 ”。 
现在 ,我 将 按照 这 一 思路 ， 在 用 来 把 onclick 事件 添加 到 链接 上 去 的 网 页 加 载 脚本 里 插入 一 
条 ff 语句。 那个 脚本 里 使 用 了 getElementsByTagName， 所 以 需要 插入 一 条 if 语句 去 检查 浏览 器 是 
否 理 解 这 个 方法 : 
window.onload = function() { 
if (!document.getElementsByTagName) return false; 
var lnks = document.getElementsByTagName("a"); 
for (var i=0; ix<lnks.length; it+) { 
if (lnks[il].getAttribute("class") == "popup") { 
lnks[i].onclick = function() { 
popUp(this.getAttribute("href")); 
return false; 
} 
} 


} 
} 


虽然 只 是 一 条 简单 的 if 语句 ， 但 它 可 以 确保 那些 “古老 的 ”浏览 器 不 会 因为 我 的 脚本 代码 
而 出 问题 。 这 么 做 是 为 了 让 脚本 有 良好 的 向 后 兼容 性 。 因 为 我 在 给 网 页 添加 各 有 关 行 为 时 始终 遵 
循 了 “渐进 增强 ”的 原则 , 所 以 可 以 确切 地 知道 我 添加 的 那些 都 能 平稳 退化 , 我 的 网 页 在 那些 “ 古 
老 的 ”浏览 器 里 也 能 正常 浏览 。 那 些 只 支持 一 部 分 JavaScript 功能 但 不 支持 DOM 的 浏览 器 仍 可 
以 访问 我 的 网 页 的 内 容 。 


5.5.2 浏览 器 嗅 探 技 术 


在 JavaScript 脚本 代码 里 ， 在 使 用 某 个 特定 的 方法 或 属性 之 前 ， 先 测试 它 是 否 真实 存在 是 确 
保 向 后 兼容 性 最 安全 和 最 可 信 的 办 法 , 但 它 并 不 是 唯一 的 办 法 。 在 浏览 器 市 场 群雄 逐鹿 的 那个 年 
代 ， 一 种 称 为 浏览 器 响 探 (browser sniffing) 的 技术 曾经 非常 流行 。 

“浏览 器 咱 探 ” 指 通过 提取 浏览 器 供应 商 提 供 的 信息 来 解决 向 后 兼容 问题 。 从 理论 上 讲 ， 可 
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以 通过 JavaScript 代码 检索 关于 浏览 器 品牌 和 版 本 的 信息 ， 这 些 信息 可 以 用 来 改善 JavaScript 脚 
本 代码 的 向 后 兼容 性 ， 但 这 是 一 种 风险 非常 大 的 技术 。 

首先 ,六 览 器 有 了 时 会 “撒谎 ”。 因 为 历史 原因 ， 有 些 浏 览 器 会 把 自己 报告 为 另外 一 种 浏览 器 ， 
还 有 一 些 浏 览 器 允许 用 户 任意 修改 这 些 信息 。 

其 次 , 为 了 适用 于 多 种 不 同 的 浏览 器 ,浏览 器 嗅 探 脚本 会 变 得 越 来 越 复 杂 。 如 果 想 让 浏览 器 
噢 探 脚 本 能 够 跨 平台 工作 , 就 必须 测试 所 有 可 能 出 现 的 供应 商 和 版 本 号 组 合 。 这 是 一 个 无 穷尽 的 
任务 ， 测 试 的 组 合 情 况 越 多 ， 代 码 就 越 复杂 和 元 长 。 

最 后 , 许多 浏览 器 嗅 探 脚 本 在 进行 这 类 测试 时 要 求 浏览 器 的 版 本 号 必须 得 到 精确 的 匹配 。 
此 ， 每 当 市 场 上 出 现 新 版 本 时 ， 就 不 得 不 修改 这 些 脚本 。 

令 人 感到 欣慰 的 是 , 充满 着 风险 的 浏览 器 嗅 探 技术 正在 被 更 简单 也 更 健壮 的 对 象 检测 技术 所 
取代 。 


5.6 性 能 考虑 


很 多 人 都 会 忽视 脚本 对 Web 应 用 整体 性 能 的 影响 。 为 保证 应 用 流畅 地 运行 ， 在 为 文档 编写 
和 应 用 脚本 时 ， 需 要 注意 一 些 问 题 。 


5.6.1 尽量 少 访问 DOM 和 尽量 减少 标记 
访问 DOM 的 方式 对 脚本 性 能 会 产生 非常 大 的 影响 。 以 下 面 代码 为 例 : 


if (document.getElementsByTagName("a").length > 0) { 
var links = document.getElementsByTagName("a"); 
for (var i=0; iclinks.length; i++) { 
; // 对 每 个 链接 做 点 处 理 


} 

搞 清 楚 这 段 代 码 要 干什么 ， 自 然 就 会 明白 问题 在 哪里 了 。 首 先 ， 它 取得 了 所 有 <a> 元 素 ， 然 
后 检查 它们 的 个 数 是 不 是 大 于 0: 

if (document.getElementsByTagName("a").length > 0) { 

然后 ， 如 果 大 于 0， 它 会 再 次 取得 所 有 <a> 元 素 ， 循 环 遍历 这 些 元 素 并 应 用 某 些 操作 : 


var links = document.getElementsByTagName("a"); 
for (var i=0; i<links.length; i++) { 


虽然 这 段 代码 可 以 运行 ,但 它 不 能 保持 最 优 的 性 能 。 不 管 什么 时 候 ， 只 要 是 查询 DOM 中 的 
某 些 元 素 ， 浏览 器 都 会 搜索 整个 DOM 树 ， 从 中 查找 可 能 匹配 的 元 素 。 这 段 代 码 居然 使 用 了 两 次 
getElementsByTagName 方法 去 执行 相同 的 操作 , 浪费 了 一 次 搜索 。 更 好 的 办 法 是 把 第 一 次 搜索 的 结 
果 保 存在 一 个 变量 中 ， 然 后 在 循环 里 重用 该 结果 ， 比 如 : 


var links = document.getElementsByTagName("a"); 
if (links.length > 0) { 
for (var i=0; iclinks.length; i++) { 
// 对 每 个 链接 做 点 处 理 
上 
} 


男 


这 样 一 来 ， 代 码 功 能 没有 变 ， 但 搜索 DOM 的 次 数 由 两 次 降低 到 了 一 次 。 

前 面 例子 中 的 问题 还 比较 容易 发 现 。 要 是 你 有 多 个 国 数 重复 做 同一 件 事 ， 臣 怕 就 不 太 好 发 现 
了 。 比 如, 要 是 有 一 个 函数 检查 每 个 链接 中 的 popup 类 , 而 另外 一 个 函数 检查 每 个 链接 中 的 hover 
类 ,那么 同样 也 会 造成 搜索 浪费 。 在 多 个 函数 都 会 取得 一 组 类 似 元 素 的 情况 下 ， 可 以 考虑 重 构 代 
码 ， 把 搜索 结果 保存 在 一 个 全 局 变量 里 ， 或 者 把 一 组 元 素 直接 以 参数 形式 传递 给 函数 。 

另 一 个 需要 注意 的 地 方 ， 就 是 要 尽量 减少 文档 中 的 标记 数量 。 过 多 不 必要 的 元 素 只 会 增加 
DOM 树 的 规模 ， 进 而 增加 遍历 DOM 树 以 查找 特定 元 素 的 时 间 。 


5.6.2 合并 和 放置 脚本 


本 书 中 的 多 数 示例 都 使 用 外 部 脚本 文件 ， 在 文档 中 通过 <script> 元 素 把 它们 包含 进来 ， 如 下 
所 示 : 

《Script src="script/function.js"></script> 

包含 脚本 的 最 佳 方式 就 是 使 用 外 部 文件 ， 因为 外 部 文件 与 标记 能 清晰 地 分 离开 , 而 且 浏 览 器 
也 能 对 站 点 中 的 多 个 页 面 重用 缓存 过 的 相同 脚本 。 不 过 ， 类 似 下 面 这 种 情况 ， 最 好 也 不 要 出 现 : 


«<script src="script/functionA.js"></script> 
«<script src="script/functionB.js"></script> 
«script src="script/functionC.js"></script> 
«script src="script/functionD.js"></script> 


推荐 的 做 法 是 把 functionA.js、functionB.js、functionC.js 和 functionD.js 合并 到 一 个 脚本 
文件 中 。 这 样 ， 就 可 以 减少 加 载 页 面 时 发 送 的 请 求 数量 。 而 减少 请 求 数量 通常 都 是 在 性 能 优化 时 
首先 要 考虑 的 。 

脚本 在 标记 中 的 位 置 对 页 面 的 初次 加 载 时 间 也 有 很 大 影响 。 传统 上 , 我 们 都 把 脚本 放 在 文档 
的 <head> 区 域 ， 这 种 放置 方法 有 一 个 问题 。 位 于 <head> 块 中 的 脚本 会 导致 浏览 器 无 法 并 行 加 载 其 
他 文件 (如 图 像 或 其 他 脚本 )。 一 般 来 说 ,根据 HTTP 规范 ， 浏 览 器 每 次 从 同一 个 域名 中 最 多 只 
能 同时 下 载 两 个 文件 。 而 在 下 载 脚本 期 间 ， 浏览 器 不 会 下 载 其 他 任何 文件 ， 即 使 是 来 自 不 同 域名 
的 文件 也 不 会 下 载 ， 所 有 其 他 资源 都 要 等 脚本 加 载 完 毕 后 才能 下 载 。 

按照 本 章 前 面 讨论 的 渐进 增强 和 分 离 JavaScript 观点 ， 把 <script> 标 签 放 到 别 的 地 方 并 不 是 
问题 。 把 所 有 <script> 标 签 都 放 到 文档 的 末尾 ，</body> 标 记 之 前 ， 就 可 以 让 页 面 变 得 更 快 。 即 使 
这 样 ， 在 加 载 脚本 时 ， window 对 象 的 10ad 事件 依然 可 以 执行 对 文档 进行 的 各 种 操作 。 


5.6.3 ”压缩 脚本 


在 写 完 了 脚本 , 做 了 优化 , 而 且 也 将 它 放 到 文档 中 的 适当 位 置 之 后 , 还 有 一 件 事 可 以 加 快 加 
载 速度 : 压缩 脚本 文件 。 

所 谓 压 缩 脚 本 , 指 的 是 把 脚本 文件 中 不 必要 的 字 市 , 如 空格 和 注释 , 统统 删除 , 从 而 达到 “ 压 
缩 ” 文 件 的 目的 。 好 在 ， 有 很 多 工具 都 可 以 替 你 来 做 这 件 事 。 有 的 精简 程序 甚至 会 重 写 你 的 部 分 
代码 ， 使 用 更 短 的 变量 名 ， 从 而 减少 整体 文件 大 小 。 

比如 ， 假 设 你 有 如 下 代码 : 
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function showPic(whichpic) { 
// 取得 图 片 的 href 属性 
var source = whichpic.getAttribute("href"); 
// 取得 占 位 符 
var placeholder = document.getElementById("placeholder"); 
// 更 新 占 位 符 
placeholder.setAttribute("src" ,Source); 
// 使 用 图 像 的 title 属性 更 新 文本 描述 
var text = whichpic .getAttribute( "title"); 
var description = document.getElementById("description"); 


压缩 之 后 的 代码 就 会 变 成 下 面 这 样 : 


function showpic(a){var b=a.getAttribute("href");document.get 
wElementById("placeholder").setAttribute("src",b);a.getAttribute 
w ("title");document.getElementById("description")}; 


精简 后 的 代码 虽然 不 容易 看 懂 ， 却 能 大 幅 减少 文件 大 小 。 多 数 情况 下 ， 你 应 该 有 两 个 版 本 ， 
一 个 是 工作 副本 ， 可 以 修改 代码 并 添加 注释 ， 另 一 个 是 精简 副本 ， 用 于 放 在 站 点 上 。 通 常 , 为 了 
与 非 精 简 版 本 区 分 开 ， 最 好 在 精简 副本 的 文件 名 中 加 上 min 字样: 


«<script src="scripts/scriptName.min.js"></script> 

下 面 是 推荐 给 读者 的 几 个 有 代表 性 的 代码 压缩 工具 : 

D Douglas Crockford 的 JSMin (http://www.crockford.com/javascript/jsmin.html) ; 
D 雅虎 的 YUI Compressor (http://developer.yahoo.com/yui/compressor); 

D 谷歌 的 Closure Compiler (http://closure-compiler.appspot.com/home ) 。 

这 些 工具 都 有 选项 ， 可 以 在 必要 时 用 来 最 大 程度 地 压缩 文件 。 


5.7 小 结 


本 章 介 绍 了 一 些 与 DOM 脚本 编程 工作 有 关 的 概念 和 实践 ， 它 们 是 : 
D 平稳 退化 
口 分 离 JavaScript 
D 向 后 兼容 
D 性 能 考虑 
在 学 习 和 使 用 Flash 和 CSS 等 其 他 一 些 技术 时 获得 的 经 验 可 以 帮助 我 们 用 好 JavaScript。 只 
有 勤 于 思考 、 善 于 借鉴 ， 才 能 编写 出 高 品质 的 脚本 。 


第 6 章 


案例 研究 ; 图 片 库 改进 版 


本 章 内 容 

口 把 事件 处 理 函 数 移出 文档 
口 向 后 兼容 

口 确保 可 访问 


在 第 4 章 里 , 我 们 创建 了 一 个 JavaScript 图 片 库 。 在 第 5 章 里 , 我 介绍 了 一 些 JavaScript 编程 
最 佳 实践 ， 在 这 一 章 里 ， 我 将 运用 它们 改进 图 片 库 。 
“ 勤 于 思考 ”是 每 位 有 创新 精神 的 网 页 设计 人 员 都 应 该 具备 的 特质 。 无 论 是 编写 CSS 脚本 还 GI 
a 也 无 论 是 直接 编写 代码 还 是 使 用 可 视 化 设计 工具 ， 一 名 优秀 的 网 页 设计 人 员 
总 是 会 在 每 个 细节 上 问 自己 这 样 一 个 问题 “是 否 还 有 更 好 的 解决 办 法 ?” 
正如 在 上 一 章 里 看 到 的 那样 ， 与 DOM 1 册 本 编程 工作 有 关 的 问题 不 外 乎 平稳 退化 、 向 后 兼容 
和 分 离 JavaScript 这 几 大 类 。 这 些 问 题 的 解决 方式 和 解决 程度 影响 着 网 页 的 可 用 性 和 可 访问 性 。 


6.1 快速 回顾 


在 第 4 章 里 ， 我 编写 了 一 个 用 来 替换 “ 占 位 符 ” 图 片 的 src 属性 的 脚本 ， 只 用 一 个 网 页 就 建 
立 起 了 图 片 库 。 这 是 最 终 完成 的 函数 代码 清单 : 


function showpic(whichpic) { 
var source = whichpic.getAttribute("href"); 
var placeholder = document. getElementById(" placeholder"); 
placeholder. setAttribute("src" ;SOUICE); 
Var text = whichpic. getAttribute(” title"); 
var description = document.getElementById("description"); 
description.firstChild.nodeValue = text; 


} 

下 面 是 用 来 调用 此 函数 的 HTML 片段 : 
<ul> 

<1i> 


<a href="images/fireworks.jpg” onclick="showPic(this);return false; " title="A 
ww fireworks display">Fireworks</a> 
</1i> 
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<1i> 
<a href="images/coffee.jpg” onclick="showpic(this); return false; "title="A cup of 
ww black coffee">Coffeex</a> 
</1i> 
<1i> 
<a href="images/rose.jpg" onclick="showPic(this); return false; "title="A red, red 
ww IOSe">Rose</a> 
</1i> 
<1i> 
<a href="images/bigben.jpg” onclick="showPic(this); return false; "title="The 
w famous clock">Big Ben</a> 
</1i> 
</ul> 
<p id="description">Choose an image.</p> 
<img id="placeholder" src="images/placeholder.gif" alt="my image gallery" /> 


现在 ， 为 改进 这 个 解决 方案 ， 我 们 要 提出 儿 个 问题 。 
6.2 ” 叱 支持 平稳 退化 吗 


第 一 个 问题 是 :“ 如 果 JavaScript 功能 被 禁用 ， 会 怎样 ?“ 


仔细 检查 过 代码 后 ， 我 得 出 的 结论 是 我 的 脚本 已 经 为 此 预 留 了 退路 : 即使 JavaScript 功能 已 


被 禁用 ， 用 户 也 可 以 浏览 图 片 库 里 的 所 有 图 片 ， 网 页 里 的 所 有 链接 也 都 可 以 正常 工作 : 


<1i> 

<a href="images/fireworks.jpg” onclick="showPic(this);return falsej” title="A 
ww fireworks display">Fireworks</a> 
</1i> 


在 没有 JavaScript“ 干 扰 ” 的 情况 下 ， 浏 览 器 将 沿 着 href 属性 给 出 的 链接 前 进 ， 用 户 将 看 到 
一 张 新 图 片 而 不 是 “该 页 无 法 显示 ”之 类 的 出 错 信 息 。 虽 说 用 户 体 验 比 用 JavaScript 的 效果 要 略 


差 一 些 ,但 网 页 的 基本 功能 并 未 受到 损害 一 一 页 面 上 的 所 有 内 容 都 可 以 访问 。 
如 果 我 当初 选用 的 是 “javascript:” 仿 协议， 链接 将 如 下 所 示 : 
]1 
href="javascript:showpic('images/coffee.jpg'); return false;"title="A cup of 


w black coffee">Coffeex</a> 
</1i> 


如 果 我 把 这 些 链接 都 写成 上 面 这 样 ， 它 们 在 不 支持 或 禁用 了 JavaScript 功能 的 浏览 器 里 将 毫 


无 用 处 。 


类 似 地 ， 把 这 些 链接 写成 “# 记号 也 会 导致 类 似 的 问题 , 但 令 人 遗憾 的 是 ， 这 个 技巧 在 那些 
利用 剪贴 操作 “编写 ”的 JavaScript 代码 里 相当 常见 。 类 似 于 使 用 “javascript:” 伪 协议 时 的 情况 ， 


如 果 当 初 使 用 的 是 “# 记号 , 那些 没有 启用 JavaScript 功能 的 用 户 也 将 无 法 正常 浏览 我 的 图 


<1i> 

<a href="#" onclick="showPic('images/rose.jpg'); return false;"title="A red, red 
ww IOSe">ROse</a> 
</1i> 


片 库 : 


把 href 属性 设置 为 一 个 真实 存在 的 值 不 过 是 举 手 之 劳 ， 但 图 片 库 却 因此 能 够 平稳 退化 。 虽 


说 没有 启用 JavaScript 功能 的 用 户 需要 在 浏览 器 里 点 击 “ 后 退 ” 按 钮 才能 重新 看 到 我 的 图 片 清单 ， 


但 这 总 比 根本 看 不 到 要 好 得 多 吧 。 
图 片 库 通 过 了 第 一 个 测试 。 
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6.3 它 的 JavaScript 与 HTML 标记 是 分 离 的 吗 


下 一 个 问题 与 在 标记 文档 里 调用 JavaScript 代码 的 方式 有 关 : 文档 的 结构 与 文档 的 行为 分 开 
了 吗 ? 换 名 话说 ， 网 页 的 行为 层 (JavaScript) 是 作用 于 其 结构 层 (HTML) 之 上 的 ， 还 是 两 种 代 
码 混杂 在 一 起 ? 

具体 到 图 片 库 这 个 例子 ， 答 案 当 然 是 “它们 混杂 在 一 起 了 ”。 

当初 我 是 把 onclick 事件 处 理 函 数 直 接 插入 到 标记 文档 里 的 ， 如 下 所 示 : 

href="images/bigben.jpg” onclick="showPic(this); return false;"title="The famous 


ww clock">Big Ben</ay> 
</1i> 


理想 情况 下 ， 应 该 在 外 部 文件 里 完成 添加 onclick 事件 处 理 函 数 的 工作 ， 那 样 才能 让 标记 文 
档 没 有 “ 厅 质 ”， 就 像 下 面 这 样 : 
<]i> 


《<a href="images/bigben.jpg" title="The famous clock">Big Ben</a> 
</1i> 


把 JavaScript 代码 移出 HTML 文档 不 是 难事 , 但 为 了 让 浏览 器 知道 页 面 里 都 有 哪些 链接 有 着 
不 一 样 的 行为 , 我 必须 找到 一 种 “挂钩” 把 JavaScript 代码 与 HIML 文档 中 的 有 关 标 记 关 联 起 来 。 
有 多 种 办 法 可 以 让 我 达到 这 一 目的 。 

可 以 像 下 面 这 样 给 图 片 清 单 里 的 每 个 链接 分 别 添加 一 个 如 下 所 示 的 class 属性 : 

<1i> 


<a href="images/bigben,jpg" class="gallerypic" title="The famous clock">Big Ben</a> 
</1i> 


但 这 种 技术 不 够 理想 ， 这 与 给 它们 分 别 添加 事件 处 理 函 数 同样 麻烦 。 
图 片 清单 里 的 各 个 链接 有 一 个 共同 点 : 它们 都 包含 在 同一 个 列表 清单 元 素 里 。 给 整个 清单 设 
置 一 个 独一无二 的 DD 的 办 法 要 简单 得 多 : 
<ul id= imagegallery "> 
<1i> 
<a href="images/fireworks.jpg" title="A fireworks display">Fireworks</a> 
</1i> 
<1i> 
<a href="images/coffee.jpg” title="A cup of black coffee">Coffee</a> 
</1i> 
<1i> 
<a href="images/rose.jpg" title="A red, red rose">Rose</a> 
</1i> 
<1i> 
<a href="images/bigben.jpg" title="The famous clock">Big Ben</a> 
</1i> 
</ul> 


你 将 看 到 ， 虽 然 只 有 这 一 个 “挂钩 "， 但 对 JavaScript 来 说 已 经 足够 了 。 
6.3.1 添加 事件 处 理 函 数 
现在 ,需要 编写 一 个 简短 的 函数 把 有 关 操 作 关联 到 onclick 事 件 上 。 我 将 其 命名 为 prepareGallery。 


el 
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下 面 是 我 想 让 这 个 函数 完成 的 工作 。 

0D 检查 当前 浏览 器 是 否 理 解 getElementsByTagName。 

口 检查 当前 浏览 器 是 否 理解 getElementById。 

D 检查 当前 网 页 是 否 存在 一 个 id 为 imagegallery 的 元 素 。 

口 遍历 imagegallery 元 素 中 的 所 有 链接 。 

D 设置 onclick 事件 ， 让 它 在 有 关 链 接 被 点 击 时 完成 以 下 操作 : 
加 把 这 个 链接 作为 参数 传递 给 showPic 函数 ， 
里 取消 链接 被 点 击 时 的 默认 行为 ， 不 让 浏览 器 打开 这 个 链接 。 

我 将 从 定义 prepareGallery 图 数 开 始 。 这 个 国 数 不 需 要 参数 ， 所 以 在 这 个 国 数 名 字 后 面 的 贺 
括号 里 用 不 着 写 出 任何 东西 : 

function prepareGallery() { 

1. 检查 点 

我 想 做 的 第 一 件 事 是 检查 当前 浏览 器 是 否 理解 名 为 getElementsByTagName 的 DOM 方法 ,我 将 
在 这 个 函数 里 使 用 这 个 方法 ， 需 要 保证 不 理解 这 个 方法 的 老 浏览 器 不 会 执行 这 个 函数 : 

if (ldocument.getElementsByTagName) return false; 

这 条 if 语 句 相 当 于 这 样 一 句 话 :“ 如 果 getElementsByTagName 未 定义 ， 请 现在 就 离开 。” 理 解 
这 个 DOM 方法 的 浏览 器 将 继续 执行 。 

现在 , 对 名 为 getElementById 的 DOM 方法 进行 同样 的 检查 , 因为 我 的 函数 也 会 用 到 这 个 方法 : 

if (ldocument.getElementById) return false; 

可 以 把 这 两 项 检查 组 合 在 一 起 :“ 只 要 你 不 理解 这 两 个 方法 中 的 其 中 一 个 ， 请 立刻 离开 ”: 

if (!document.getElementsByTagName || !document.getElementById)return false; 
或 者 

var supported = document.getElementsByTagName && document.getElementById; 

if ( !supported ) return; 

不 过 ， 上 面 这 样 的 代码 开始 变 得 比较 元 长 并 难以 阅读 。 事实 上 ， 从 可 读 性 的 角度 看 ,把 多 项 
测试 写 在 同一 行 上 的 做 法 不 一 定 是 最 好 的 主意 ,有 不 少 程序 员 喜 欢 像 下 面 这 样 把 return 语句 单独 
写 在 一 行 上 : 

if (ldocument.getElementsByTagName) 

return false; 


if (!document.getElementById) 
return false; 


如 果 你 也 喜欢 这 样 的 写法 ， 建 议 最 好 是 用 花 括号 把 return 语句 括 起 来 ， 如 下 所 示 : 


if (!document.getElementsByTagName) { 
return false; 


if (!document.getElementById) { 
return false; 
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这 或 许 是 最 清晰 、 最 具有 可 读 性 的 代码 书写 方式 。 
把 这 些 测 试 写 在 同一 行 上 还 是 写成 好 几 行 是 你 的 自由 ， 你 完全 可 以 根据 自己 的 喜好 来 选 


完成 这 两 项 具有 普遍 适用 性 的 测试 后 , 我 还 安排 了 一 个 更 具 针 对 性 的 测试 。 我 正在 编写 的 这 
国 数 将 处 理 id 等 于 imagegallery 的 那个 元 素 所 包含 的 链接 ， 假 如 这 个 元 素 并 不 存在 ， 我 的 这 
国 数 也 就 无 需 继续 执行 了 。 

与 前 面 两 项 测试 一 样 ， 我 将 使 用 “逻辑 非 ” 操 作 符 来 进行 这 一 测试 : 

if (ldocument.getElementById("imagegallery")) return false; 

出 于 个 人 偏好 ， 你 也 许 更 喜欢 下 面 这 样 的 写法 : 


if (!document.getElementById("imagegallery")) { 
return false; 


全 信 


这 项 测试 是 一 个 预防 性 措施 。 现在 我 知道 调用 这 个 JavaScript 函数 的 文档 里 有 一 个 id 属性 值 
等 于 imagegallery 的 列表 清单 元 素 ， 但 我 不 敢 确定 这 在 将 来 会 不 会 发 生变 化 。 有 了 这 个 预防 性 措 
施 ， 即 使 以 后 我 决定 从 网 页 上 删 掉 图 片 库 ， 也 用 不 着 担心 这 个 网 页 的 JavaScript 代码 会 突然 出 错 。 
把 HTML 文档 的 内 容 与 JavaScript 代码 所 实现 的 行为 分 离开 来 的 重要 性 由 此 可 见 一 王 。 作 为 一 条 
原则 ， 如 果 想 用 JavaScript 给 某 个 网 页 添加 一 些 行为 ， 就 不 应 该 让 JavaScript 代码 对 这 个 网 页 的 
结构 有 任何 依赖 。 


结构 化 程序 设计 备 忘 

我 们 在 学 校 里 学 过 一 种 理论 ， 叫 结构 化 程序 设计 (structed programming) 。 其 中 有 这 样 一 
条 原则 : 函数 应 该 只 有 一 个 入 口 和 一 个 出 口 。 

我 刚才 的 做 法 已 经 违背 了 这 一 原则 : 我 在 prepareGallery() 函 数 的 开头 部 分 使 用 了 多 条 
return false 语句， 它们 全 都 是 这 个 耶 数 的 出 口 。 根 据 结构 化 程序 设计 理论 ， 应 该 把 这 些 出 口 
点 减少 到 一 个 。 

从 理论 上 讲 , 我 很 赞同 这 项 原则 ; 但 在 实际 工作 中 , 过 分 拘泥 于 这 项 原则 往往 会 使 代码 变 
得 非常 难以 阅读 。 如 果 为 了 避免 贸 下 多 个 出 口 点 而 去 改写 那些 if 语句 的 话 ， 这 个 耶 数 的 核心 
代码 就 会 被 掩埋 在 一 层 又 一 层 的 花 括 号 里 ， 就 像 下 面 这 样 : 


function prepareGallery() { 
if (document.getElementsByTagName) { 
if (document.getElementById) { 
if (document.getElementById("imagegallery")) { 
statements go here... 


} 
} 
} 


我 个 人 认为 ， 如 果 一 个 函数 有 多 个 出 口 ， 只 要 这 些 出 口 集 中 出 现在 函数 的 开头 部 分 ， 就 
是 可 以 接受 的 。 
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出 于 可 读 性 的 考虑 ， 我 把 那些 return false 语句 全 部 集中 到 prepareGallery 的 开头 部 分 


function prepareGallery() { 
if (!document.getElementsByTagName) return false; 
if (ldocument.getElementById) return false; 
f (ldocument.getElementById("imagegallery")) return false; 


必要 的 测试 和 检查 工作 就 绪 之 后 ， 我 现在 开始 写 事件 处 理 函 数 的 核心 功能 。 
变量 名 里 有 什么 
首先 ， 我 想 把 事情 弄 得 稍微 简单 些 : 重复 多 次 地 敲 入 像 document .getElementById("image 
gallery") 这 么 长 的 一 串 实在 很 麻烦 ， 所 以 我 决定 创建 一 个 名 为 gallery 的 变量 来 简化 它 : 


var gallery = document.getElementById("imagegallery"); 


完全 可 以 给 变量 起 一 个 另外 的 名 字 。 我 之 所 以 选用 “gallery” 来 命名 ， 是 因为 它 的 含义 就 是 
图 片 库 。 选 择 一 些 有 意义 的 单词 来 命名 可 以 让 代码 更 容易 阅读 和 理解 。 


注意 在 为 变量 命名 时 一 定 要 谨慎 从 事 。 有 些 单词 在 JavaScript 语 言 里 有 特殊 的 含义 和 用 途 , 这 
些 统称 为 “保留 字 ” 的 单词 不 能 用 做 变量 名 。 另 外 ， 现 有 JavaScript 函数 或 方法 的 名 字 也 
不 能 用 来 命名 变量 。 不 要 使 用 诸如 alert、var 或 计 之 类 的 单词 作为 变量 的 名 字 。 


按照 计划 , 需要 遍历 imagegallery 元 素 中 的 所 有 链接 ， 我 会 用 到 getElementsByTagName。 利 用 
刚刚 创建 的 gallery 变量 ， 可 以 把 对 getElementsByTagName 的 调用 简单 地 写成 下 面 这 个 样子 : 

gallery.getElementsByTagName("a") 

它 等 价 于 下 面 这 个 长 长 的 记号 : 

document ,getElementById("imagegallery").getElementsByTagName("a") 

现在 , 我 想 把 事情 弄 得 更 简单 些 。 我 决定 把 上 面 这 个 记号 所 代表 的 数组 (更 准确 地 说 ， 是 一 
个 节点 列表 ) 赋值 给 一 个 短 变量 ， 并 将 该 变量 命名 为 1inks: 


var links = gallery.getElementsByTagName("a"); 


下 面 是 prepareGallery 函数 目前 的 样子 : 


function prepareGallery() { 
if (!document.getElementsByTagName) return false; 
if (!document.getElementById) return false; 
if (!document.getElementById("imagegallery")) return false; 
var gallery = document .getElementById("imagegallery"); 
var links = gallery.getElementsByTagName("a"); 


准备 工作 已 就 绪 。 我 已 经 安排 好 了 必要 的 检查 工作 ， 还 创建 了 几 个 变量 。 

3. 遍历 

我 想 遍 历 处 理 1inks 数组 里 的 各 个 元 素 ， 可 以 用 一 个 for 循环 来 完成 这 项 工作 。 

首先 ， 把 计数 器 的 初始 值 设 置 为 零 。 每 处 理 1inks 数组 里 的 一 个 元 素 ， 这 个 计数 器 就 增加 一 
个 1。 下 面 是 对 计数 器 进行 初始 化 的 语句 : 
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var i = 0; 

把 充当 循环 计数 器 的 变量 命名 为 “i” 是 一 种 传统 做 法 。 字母 “i” 在 这 里 的 含义 是 “increment” 
(递增 ), 许多 程序 设计 语言 里 都 习惯 使 用 “i” 作 为 递增 的 变量 的 名 字 。 

下 面 是 这 个 循环 的 控制 条 件 : 

i < links.length; 

上 面 这 个 表达 式 的 含义 是 : 只 要 变量 i 的 值 小 于 1inks 数组 的 length 属性 值 ， 这 个 for 循环 
就 一 直 循 环 下 去 。length 的 值 总 是 等 于 1inks 数组 里 的 元 素 总 个 数 。 因 此 ， 如果 1inks 数组 包含 4 
个 元 素 ， 那 么 只 要 i 小 于 4， 我 的 for 循环 就 将 一 直 循 环 下 去 。 

最 后 ， 使 用 下 面 这 个 记号 来 给 循环 计数 器 加 上 一 个 1: 


i++; 
这 个 记号 是 下 面 这 条 语句 的 简写 形式 : 
i = i+l; 


上 面 这 几 条 语句 的 效果 是 : 这 个 for 循环 每 执行 一 次 ， 变 量 i 的 值 就 会 加 1; 一 旦 变量 i 的 
值 不 再 小 于 1inks.lengtn， 循 环 就 结束 。 因 此 ， 如 果 1inks 数组 包含 4 个 元 素 ， 这 个 循环 将 在 ji 
等 于 4 时 结束 执行 。 这 个 循环 将 总 共 执 行 4 次 一 一 别 忘 了， 变量 j 是 从 零 开始 计数 的 。 

下 面 是 for 循环 的 开头 部 分 : 

for ( var i=0; i < links.length; i++t) { 

4. 改变 行为 

具体 到 这 个 例子 ， 我 想 要 完成 的 操作 是 改变 1inks 数组 中 的 各 个 元 素 的 行为 。 事 实 上 ， 与 其 
说 1inks 是 一 个 数组 ， 不 如 说 它 是 一 个 节点 列表 (node list) 来 得 更 准确 。 它 是 一 个 由 DOM 节点 
构成 的 集合 ， 这 个 集合 里 的 每 个 节点 都 有 自己 的 属性 和 方法 。 

我 最 感 兴趣 的 是 它 的 onclick 方法 ， 像 下 面 这 样 为 它 添加 一 个 行为 : 

links[i].onclick = function() { 

这 条 语句 定义 了 一 个 匿名 函数 。 这 是 一 种 在 代码 执行 时 创建 函数 的 办 法 。 具体 到 上 面 这 条 语 
句 ， 它 把 1inks[ 让 元 素 的 onclick 事件 处 理 函 数 指定 为 这 个 匿名 函数 。 这 个 匿名 函数 里 的 所 有 语 
句 将 在 1inks[i] 元 素 所 对 应 的 链接 被 点 击 时 执行 。 

links[ 刘 元 素 的 值 会 随 着 变量 i 的 递增 而 变化 。 如 果 假 设 1inks 集合 里 包含 4 个 元 素 , 那么 第 
一 个 元 素 将 是 1inks[0]， 最 后 一 个 元 素 是 1inks[3]。 

我 传递 给 showPic 函数 的 参数 是 关键 字 this， 它 代表 此 时 此 刻 与 onclick 方法 相关 联 的 那个 
元 素 。 也 就 是 说 ，this 在 这 里 代表 1inks[i]， 而 1inks[ 记 又 对 应 着 links 节点 列表 里 的 某 个 特定 
的 节点 : 

showPic(this); 

我 还 需要 再 多 做 一 件 事 ， 即 禁用 有 关 链 接 的 默认 行为 。 如 果 showPic() 函 数 执行 成 功 ， 就 不 
让 浏览 器 执行 某 个 链接 被 点 击 时 的 默认 操作 。 和 以 前 一 样 ， 我 想 取 消 这 种 默认 行为 ， 不 让 浏览 器 
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前 进 到 那个 链接 所 指向 的 目的 地 : 

return false; 

返回 布尔 值 false 相当 于 向 浏览 器 传递 了 这 样 一 条 消息 :“ 按 照 这 个 链接 没 被 点 击 的 情况 采 
取 行动 。” 

最 后 ， 还 需要 用 一 个 右 花 括号 来 结束 这 个 匿名 函数 。 下 面 是 我 最 终 完成 的 匿名 函数 : 


links[i].onclick = function() { 
ShowPic(this); 
return false; 


5. 完成 JavaScript 函 数 
现在 ， 需 要 用 一 个 右 花 括号 来 结束 for 循环 : 


for ( var i=0; i < links.length; i++t) { 
links[il].onclick = function() { 
showpic(this); 
return false; 


} 
最 后 ， 再 用 一 个 右 花 括号 结束 prepareGallery 函数 。 下 面 是 这 个 函数 完整 代码 清单 : 


function prepareGallery() { 
if (!document.getElementsByTagName) return false; 
f (ldocument.getElementById) return false; 
if (ldocument.getElementById("imagegallery")) return false; 
var gallery = document.getElementById("imagegallery"); 
var links = gallery.getElementsByTagName("a" ); 
for ( var i=0; i < links.length; i++) { 
links[i].onclick = function() { 
showPic(this); 
return false; 


} 
} 


调用 此 函数 ， 就 会 把 onclick 事件 绑 定 到 id 等 于 “imagegallery” 的 元 素 内 的 各 个 链接 元 素 
半 。 


注意 如果 想 了 解 JavaScript 的 其 他 信息 ， 可 以 参考 Aaron Gustafon 与 我 合 著 的 Advanced DOM 
Scripting: Dynamic Web Desiegn Techniques (Apress，2007) 。 


6.3.2 ”共享 on1oad 事件 


我 必须 执行 prepareGallery 函数 才能 对 onclick 事件 进行 绑 定 。 
如 果 马 上 执行 这 个 函数 ， 它 将 无 法 完成 其 工作 。 如 果 在 HIML 文档 完成 加 载 之 前 执行 脚本 ， 
be DOM 是 不 完整 的 。 具 体 到 prepareGallery 函数 ， 它 的 第 3 行 代码 将 测试 "imagegallery" 元 素 
否 存在 ， 如 果 DOM 不 完整 ， 这 项 测试 的 准确 性 就 无 从 谈 起 ， 事 态 的 发 展 就 会 偏离 我 的 计划 。 
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应 该 让 这 个 函数 在 网 页 加 载 完毕 之 后 立刻 执行 。 网 页 加 载 完毕 时 会 触发 一 个 on1oad 事件 ， 
这 个 事件 与 window 对 象 相关 联 。 为 了 让 事态 的 发 展 不 偏离 计划 ， 必 须 把 prepareGallery 国 数 绑 
定 到 这 个 事件 上 : 

window.onload = prepareGallery; 

它 解 决 了 我 的 问题 ， 但 像 现在 这 样 还 不 够 完美 。 

假设 我 有 两 个 函数 : firstFunction 和 secondFunction。 如 果 想 让 它们 俩 都 在 页 面 加载 时 得 
到 执行 ,我 该 怎么 办 ? 如 果 把 它们 逐一 绑 定 到 on1oad 事件 上 ， 它 们 当中 将 只 有 最 后 那个 才 会 被 
实际 执行 : 


window.onload = firstFunction; 
window.onload = secondFunction; 


secondFunction 将 取代 firstFunction。 你 可 能 会 想 : 每 个 事件 处 理 函 数 只 能 绑 定 一 条 指令 。 
有 一 种 办 法 可 以 让 我 避 过 这 一 难题 : 可 以 先 创 建 一 个 匿名 函数 来 容纳 这 两 个 函数 ,然后 把 那 
个 匿名 函数 绑 定 到 on1oad 事件 上 ， 如 下 所 示 : 


window.onload = function() { 
firstFunction(); 
secondFunction(); 


} 

它 确实 能 很 好 地 工作 一 一 在 需要 绑 定 的 函数 不 是 很 多 的 场合 ， 这 应 该 是 最 简单 的 解决 方案 
i 

这 里 还 有 一 个 弹性 最 佳 的 解决 方案 一 一 不 管 你 打算 在 页 面 加 载 完 毕 时 执行 多 少 个 函数 , 它 都 
可 以 应 付 自 如 。 这 个 方案 需要 额外 编写 一 些 代 码 ， 但 好 处 是 一 旦 有 了 那些 代码 ， 把 函数 绑 定 到 
window.onload 事件 就 非常 易 行 了 。 

这 个 函数 的 名 字 是 addLoadEvent， 它 是 由 Simon Willison ( 详 见 http:/simon.incutio.com) 编 
写 的 。 它 只 有 一 个 参数 : 打算 在 页 面 加载 完 毕 时 执行 的 函数 的 名 字 。 

下 面 是 addLoadEvent 函数 将 要 完成 的 操作 。 
口 把 现 有 的 window.onload 事件 处 理 函 数 的 值 存 入 变量 oldon1oad。 
如 果 在 这 个 处 理 函 数 上 还 没有 绑 定 任何 函数 ， 就 像 平时 那样 把 新 函数 添加 给 它 。 
口 如 果 在 这 个 处 理 函 数 上 已 经 绑 定 了 一 些 函 数 ， 就 把 新 函数 追加 到 现 有 指令 的 末尾 。 
下 面 是 addLoadEvent 函数 的 代码 清单 : 


function addLoadEvent(func) { 
var oldonload = window.onload; 
if (typeof window.onload != 'function’) { 
window.onload = func; 
} else { 
window.onload = function() { 
oldonload(); 
func(); 
} 
} 
} 
这 将 把 那些 在 页 面 加 载 完 毕 时 执行 的 函数 创建 为 一 个 队列 。 如 果 想 把 刚才 那 两 个 函数 添加 到 
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这 个 队列 里 去 ， 只 需 写 出 以 下 代码 就 行 了 : 


addLoadEvent(firstFunction); 
addLoadEvent(secondFunction); 


我 发 现 这 个 函数 非常 实用 , 尤其 是 在 代码 变 得 越 来 越 复 厅 的 时 候 。 无 论 打算 在 页 面 加载 完 毕 
时 执行 多 少 个 函数 ， 只 要 多 写 一 条 语句 就 可 以 安排 好 一 切 。 

这 个 解决 方案 对 prepareGallery 函数 来 说 好 像 有 点 儿 大 材 小 用 ， 因 为 只 有 这 一 个 函数 需要 在 
页 面 加 载 完毕 时 执行 。 可 是, 为 以 后 的 扩展 做 一 些 准 备 工 作 总 不 是 件 坏事 。 我 决定 把 addLoadEvent 
函数 收录 到 我 的 脚本 里 ， 这 使 我 只 需 写 出 下 面 这 行 代 码 就 可 以 了 : 

addLoadEvent(prepareGallery); 

到 这 一 步 ，prepareGallery 函数 已 经 足够 安全 了 ， 至 少 在 我 的 能 力 范 围 内 。 接 下 来 ， 我 将 怀 
疑 的 目光 转向 第 4 章 编写 的 showPic 函数 。 


6.4 不 要 做 太 多 的 假设 


我 在 showPic 函数 里 发 现 的 第 一 个 问题 是 ， 我 没有 让 它 进行 任何 测试 和 检查 。 
showPic 函数 将 由 prepareGallery 函数 调用 ， 而 我 已 经 在 后 者 的 开头 对 getElementById 和 
getElementsByTagName 等 DOM 方法 是 否 存在 进行 过 检查 , 所 以 我 确切 地 知道 用 户 的 浏览 器 不 会 因 
为 不 理解 这 两 个 方法 而 出 问题 。 

不 过 , 我 还 是 做 出 了 太 多 的 假设 。 别 的 先 不 说 , 我 在 代码 里 用 到 了 id 属性 值 等 于 placeholder 
和 description 的 元 素 ， 但 我 并 未 对 这 些 元 素 是 否 存在 做 任何 检查 : 


function showPic(whichpic) { 
var source = whichpic.getAttribute("href"); 
var placeholder = document.getElementById("placeholder"); 
placeholder.setAttribute("src" ,source); 
var text = whichpic.getAttribute("title"); 
var description = document.getElementById("description"); 
description.firstChild.nodeValue = text; 


需要 增加 一 些 语 句 来 检查 这 些 元 素 是 否 存 在 。 

showPic 函数 负责 完成 两 件 事 : 一 是 找 出 id 属性 值 是 placeholder 的 图 片 并 修改 其 src 属性 ， 
二 是 找 出 id 属性 是 description 的 元 素 并 修改 其 第 一 个 子 元 素 (firstChild) 的 nodeValue 属性 。 
第 一 件 事 是 这 个 函数 必须 完成 的 任务 , 第 二 件 事 只 是 一 项 锦上添花 的 补充 。 因 此 , 我 决定 把 检查 
工作 分 成 两 个 步骤 以 获得 这 样 一 种 效果 : 只 要 placeholder 图 片 存在 ， 即 使 description 元 素 不 存 
在 ， 切 换 显示 新 图 片 的 操作 也 将 照常 进行 。 

正如 你 在 prepareGallery 函数 里 看 到 的 那样 ， 检 查 某 个 特定 的 元 素 是 否 存在 是 一 件 很 简单 的 
事情 : 

if (ldocument.getElementById("placeholder")) return false; 

紧 随 其 后 的 是 用 来 修改 placeholder 图 片 的 src 属性 的 代码 ， 它 们 的 效果 是 切换 显示 一 张 新 
图 片 : 
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var source = whichpic.getAttribute("href"); 
var placeholder = document.getElementById("placeholder"); 
placeholder.setAttribute("src" ,source); 


以 上 代码 负责 完成 函数 的 主要 任务 。 接 下 来 ， 采 用 一 种 稍 有 不 同 的 方法 检查 description 元 
素 是 否 存在 : 


if (document.getElementById("description")) { 
只 有 通过 了 这 项 检查 ， 负 责 修 改 图 片 说 明文 字 的 代码 才 会 得 到 执行 ， 如 下 所 示 : 


var text = whichpic.getAttribute("title"); 
var description = document.getElementById("description"); 
description.firstChild.nodeValue = text; 


将 描述 部 分 放 在 if 语句 里 后 ，description 元 素 将 是 可 选 的 。 如 果 它 存在 ， 它 将 被 更 新 ， 否 
则 会 忽略 。 

return true; 

下 面 是 showPic 函数 在 我 给 它 增加 了 检查 之 后 的 代码 清单 : 


function showpic(whichpic) { 
if (!document.getElementById("placeholder")) return false; 
Var source = whichpic.getAttribute( "href"); 
var placeholder = document.getElementById("placeholder"); 
placeholder.setAttribute("src" ,source); 
if (document.getElementById("description")) { 
var text = whichpic.getAttribute("title"); 
var description = document.getElementById("description"); 
description.firstChild.nodeValuyue = text; 


return true; 


改进 后 的 showPic() 函数 不 再 假设 有 关 标 记 文档 里 肯定 存在 着 placeholder 图 片 和 
description 元 素 。 即 使 文档 里 没有 placeholder 图 片 ， 也 不 会 发 生 任何 JavaScript 错误 。 

可 是 , 还 有 一 个 问题 : 如 果 把 placeholder 图 片 从 标记 文档 里 删 掉 并 在 浏览 器 里 刷新 这 页 面 ， 
就 会 出 现 这 种 情况 ， 无 论点 击 imagegallery 清单 里 的 哪 一 个 链接 ， 都 没有 任何 响应 。 

这 意味 着 我 们 的 脚本 不 能 平稳 退化 。 此 时 ， 应 该 让 浏览 器 打开 那个 被 点 击 的 链接 ,而 不 古 让 
什么 事情 都 不 发 生 。 

问题 在 于 prepareGallery 函数 做 出 了 这 样 一 个 假设 : showPic 函数 肯定 会 正常 返回 。 基于 这 一 
假设 ，prepareGallery 函数 取消 了 onclick 事件 的 默认 行为 : 


links[i].onclick = function() { 
showPic(this); 
return false; 


是 否 要 返回 一 个 false 值 以 取消 onclick 事件 的 默认 行为 ， 其 实 应 该 由 showPic 函数 决定 。 
showPic 应 返回 两 个 可 能 的 值 。 
口 如 果 图 片 切 换 成 功 ， 返 回 true。 
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口 如 果 图 片 切换 不 成 功 ， 返 回 false。 

为 修正 这 个 问题 ， 应 该 在 返回 前 验证 showPic 的 返回 值 ， 以 便 决 定 是 否 阻止 默认 行为 。 如 果 
showPic 返回 true, 那 么 更 新 placeholder。 在 onclick 事件 处 理 函 数 中 ,我 们 可 以 利用 “1 对 showPic 
的 返回 值 进行 取 反 。 


links[i].onclick = function() { 
return !showpic(this); 


现在 ， 如 果 showPic 返回 true， 我 们 就 返回 false， 浏 览 器 不 会 打开 那个 链接 。 
如 果 showPic 返回 false， 那 么 我 们 认为 图 片 没 有 更 新 ， 于 是 返回 true 以 允许 默认 行为 发 生 。 
下 面 是 prepareGallery 函数 现在 的 代码 清单 : 


function prepareGallery() { 
if (!document.getElementsByTagName) return false; 
if (!document.getElementById) return false; 
if (ldocument.getElementById("imagegallery")) return false; 
var gallery = document.getElementById("imagegallery"); 
var links = gallery.getElementsByTagName("a"); 
for ( var i=0; i < links.length; i++) { 
links[i].onclick = function() { 
return !showpic(this); 


} 
} 


经 过 一 番 周 折 ， 终 于 把 最 后 一 个 已 知 问题 解决 了 。 如 果 palceholder 图 片 不 存在 ， 浏 览 器 将 
按 用 户 所 点 击 的 那个 链接 打开 一 张 新 图 片 。 现 在 可 以 把 palceholder 图 片 重新 放 回 到 标记 里 去 了 。 


6.5 优化 

这 几 个 国 数 已 经 相当 完善 了 。 虽 然 它们 的 长 度 有 所 增加 , 但 它们 对 标记 的 依赖 和 假设 已 经 比 
原先 少 多 了 。 

尽管 如 此 ， 在 showPic 函数 里 仍 存在 一 些 需 要 处 理 的 假设 。 

比如 说 ， 假 设 每 个 链接 都 有 一 个 title 属性 : 

var text = whichpic.getAttribute("title"); 

为 了 检查 title 属性 是 否 真 的 存在 ， 可 以 测试 它 是 不 是 等 于 nul1: 

if (whichpic.getAttribute("title") != null) 

如 果 title 属性 存在 ， 这 个 if 表达 式 将 被 求 值 为 true。 如 果 title 属性 不 存在 ，whichpic. 
getAttribute("title") 将 等 于 null， 而 这 个 计 表 达 式 将 被 求 值 为 false。 

这 个 if 表达 式 还 可 以 简写 为 : 

if (whichpic.getAttribute("title")) 

只 要 title 属性 存在 ， 这 个 if 表达 式 就 将 返回 一 个 true 值 。 

作为 一 种 简单 的 视觉 反馈 ， 在 title 属性 不 存在 时 把 变量 text 的 值 设置 为 空 字符 串 : 
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if (whichpic.getAttribute("title")) { 

Var text = whichpic.getAttribute("title"); 
} else { 

var text = ""; 


下 面 是 完成 同样 操作 的 另 一 种 办 法 : 

var text = whichpic.getAttribute("title") ? whichpic.getAttribute("title") : "" 

紧 跟 在 getAttribute 后 面 的 问号 是 一 个 三 元 操作 符 (ternary operator) 。j 人 
量 text 的 两 种 可 取 值 。 如 果 getAttribute("title") 的 返回 值 不 是 nu11，text 变量 将 被 赋值 为 第 一 
个 值 ;， 如果 getAttribute( title ) 的 返回 值 是 nu11，text 变量 将 被 赋值 为 第 二 个 值 : 


variable = condition ?if true : if false; 


如 果 title 属性 存在 ， 变 量 text 将 被 赋值 为 whichpic.getAttribute("title")。 如 果 title 属 
性 不 存在 ， 变 量 text 将 被 赋值 为 一 个 空 字符 串 ("")。 
三 元 操作 符 是 if/else 语句 的 一 种 变 体形 式 。 它 比较 简短 ， 但 逻辑 关系 表达 得 不 那么 明显 。 
如 果 你 也 这 么 认为 ， 那 就 使 用 if/else 语句 好 了 。 
现在 ， 如 果 试 图 把 imagegallery 清单 里 的 某 个 链接 的 title 属性 删 掉 并 重新 加 载 这 个 页 面 ， 
当 你 再 去 点 击 那个 链接 的 时 候 ，description 元 素 将 被 填 入 一 个 空 字 符 串 。 
如 果 想 做 到 十 全 十 美的 话 ， 可 以 对 任何 一 种 情况 进行 检查 6 
比如 说 ， 检 查 placeholder 元 素 是 否 存在 ， 但 外 需要 假设 那 是 _ 张 图 片 。 为 了 验证 这 种 情 ; 
可 以 用 nodeName 属性 来 增加 一 项 测试 : 


if (placeholder.nodeName != "IMG") return false; 


请 注意 ，nodeName 属性 总 是 返回 一 个 大 写字 母 的 值 ， 即 使 元 素 在 HTML 文档 里 是 小 写字 母 。 

我 还 可 以 引入 更 多 的 检查 。 比 如 说 ， 假 设 description 元素 的 第 一 个 子 元 素 (firstChild) 是 
一 个 文本 节点 。 我 应 该 对 此 进行 检查 。 

可 以 利用 nodeType 属性 来 进行 这 项 检查 。 还 记得 吗 ， 文 本 节点 的 nodeType 属性 值 等 于 3: 


if (description.firstChild.nodeType == 3) { 
description.firstChild.nodeValue = text; 


下 面 是 引入 了 以 上 几 项 检查 之 后 showPic 函数 的 代码 清单 : 


function showPic(whichpic) { 

if (!document.getElementById("placeholder")) return false; 

var source = whichpic.getAttribute("“href"); 

var placeholder = document.getElementById("placeholder"); 

if (placeholder.nodeName != "IMG") return false; 

placeholder. setAttribute("src", source); 

if (document.getElementById("description")) { 
var text = whichpic.getAttribute("title”) ? whichpic. getAttribute("title") : es 
Var description = document.getElementById("description" ); 
if (description.firstChild.nodeType == 

description.firstChild.nodeValue = text; 


return true; 
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因为 又 增加 了 几 项 检查 ，showPic() 国 数 里 的 代码 变 得 更 多 了 。 在 实际 工作 中 ,你 要 自己 决定 
是 否 真 的 需要 这 些 检查 。 它 们 针对 的 是 HTML 文档 有 可 能 不 在 你 控制 范围 内 的 情况 。 理 想 情 况 
下 ， 你 的 脚本 不 应 该 对 HTML 文档 的 内 容 和 结构 做 太 多 的 假设 。 

这 方面 的 决定 需要 根据 具体 情况 来 做 出 。 


6.6 ”键盘 访问 


在 有 关 0 


nclick 事件 处 理 的 脚本 里 ， 有 一 项 优化 工作 是 不 能 不 考虑 的 。 


下 面 是 prepareGallery() 函 数 中 的 核心 代码 : 


links[i]. 


onclick = function() { 


if (showPic(this)) { 
return false; 


} else 


{ 


return true; 


} 
} 


首先 ， 为 了 简洁 ， 将 它 改 为 使 用 三 元 运算 符 。 


links[il].onclick = function() { 


return 


+ 


了 一 个 假定 : 


showPic(this) ? false : true; 


这 段 代码 本 身 没有 任何 毛病 。 当 这 个 链接 被 点 击 时 ，showPic() 函 数 就 开始 执行 。 不过， 这 作 


用 户 只 会 使 用 鼠标 来 点 击 这 个 链接 。 


但 是 , 千 万 不 要 忘记 并 非 所 有 的 用 户 都 使 用 鼠标 。 比 如 说 ， 有 视力 残疾 的 用 户 往 往 无 法 看 清 


屏幕 上 四 处 移动 的 鼠标 指针 ， 他 们 往往 更 喜欢 使 用 键盘 。 

作为 一 个 众所周知 的 事实 , 不 使 用 鼠标 也 可 以 浏览 Web。 键盘 上 的 Tab 键 可 以 让 我 们 从 这 个 
链接 移动 到 另 一 个 链接 ， 而 按 下 回 车 键 将 启用 当前 链接 。 

有 个 名 叫 onkeypress 的 事件 处 理 函 数 是 专门 用 来 处 理 键盘 事件 的 。 按 下 键盘 上 任何 一 个 按键 
都 会 触发 onkeypress 事件 。 

如 果 想 让 onkeypress 事件 与 onclick 事件 触发 同样 的 行为 , 可 以 简单 地 把 有 关 指 令 复 制 一 份 : 


links[i 
return 


links[i] 
return 


.onclick = function() { 
showpic(this) ? false : true; 


.onkeypress = function() { 
showpic(this) ? false : true; 


还 有 一 种 更 简单 的 办 法 可 以 确保 onkeypress 模仿 onclick 事件 的 行为 : 


links[i] 


.onkeypress = links[i].onclick; 


上 面 这 条 一 语句 把 onclick 事件 的 所 有 功能 赋 给 onkeypress 事件 : 


links[i] 


.onclick = function() { 


return showpic(this) ? false : true; 


links[i] 


.onkeypress = links[i].onclick; 
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这 就 是 JavaScript 与 HTML 分 离 带 来 的 方便 。 

如 果 你 已 经 把 所 有 的 函数 和 事件 处 理 函 数 都 放 在 了 外 部 文件 里 ， 就 可 以 只 在 必要 时 修改 
JavaScript 代码 ， 而 根本 不 用 动 HTML 文件 。 你 可 以 随时 打开 你 的 脚本 文件 ， 优 化 它们 ， 你 做 出 
的 修改 将 自动 作用 于 每 个 引用 了 它 的 网 页 。 

如 果 你 仍 在 使 用 内 艇 于 HTML 文档 的 事件 处 理 函 数 ， 在 修改 JavaScript 功能 之 后 ,你 可 能 需 
要 打开 HTML 文档 去 进行 大 量 的 修改 。 比 如 说 ， 在 图 片 库 这 个 例子 里 ， 我 当初 曾 使 用 过 一 些 如 
下 所 示 的 内 舱 事 件 处 理 函 数 : 

href="images/fireworks.jpg" onclick="showPic(this);return false;"title="A 


wfireworks display">Fireworks</a> 
</1i> 


在 对 showPic() 国 数 返 回 true 或 false 的 情况 做 出 调整 之 后 ， 我 不 得 不 对 HTML 文档 里 的 
onclick 事件 处 理 函 数 做 出 相应 的 修改 ， 如 下 所 示 : 
<1i> 
<a href="images/fireworks.jpg” onclick="return showPic(this) ? false : true;" 


ww title="A fireworks display">Fireworks</a> 
</1i> 


如 果 图 片 库 有 大 量 图 片 的 话 ， 这 种 修改 工作 真是 又 累 又 烦 。 
设想 一 下 ， 如 果 想 添加 onkeypress 事件 处 理 函 数 ， 就 不 得 不 找 出 所 有 的 链接 ， 给 它们 每 个 
增加 一 个 内 贬 事 件 处 理 函 数 : 
<1i> 
<a href="images/fireworks.jpg” onclick="return showPic(this) ? false : true;" 
w onkeypress="return showpic(this) ? false : true;" 


ww title="A fireworks display">Fireworks</a> 
</1i> 


这 是 一 件 苗 差事 (非常 麻烦 又 非常 容易 出 错 ) 。 而 现在 我 只 修改 了 很 少 几 条 语句 就 把 一 切 安 
排 妥当 。 


小 心 onkeypress 


我 最 后 的 决定 是 不 添加 onkeypress 事件 处 理 函 数 。 原 因 是 这 个 事件 处 理 函 数 很 容易 出 问题 。 
用 户 每 按 下 一 个 按键 都 会 触发 它 。 在 某 些 浏览 器 里 ， 其 至 包括 Tab 键 ! 这 意味 着 如 果 绑 定 在 
onkeypress 事件 上 的 处 理 函数 上 返回 的 是 false， 那 些 只 使 用 键盘 访问 的 用 户 将 永远 无 法 离开 当前 
链接 。 我 的 图 片 库 网 页 就 存在 这 样 的 问题 一 一 只 要 图 片 切换 成 功 ，showPic 函数 就 将 返回 false。 

那 这 些 只 使 用 键盘 的 人 可 怎么 办 ? 

夷 运 的 是 ，onclick 事件 处 理 函 数 比 我 们 想象 得 更 聪明 。 虽 然 它 的 名 字 “onclick” 给 人 一 种 
它 只 与 鼠标 点 击 动作 相关 联 的 印象 ， 但 事实 却 并 非 如 此 : 在 几乎 所 有 的 浏览 器 里 ， 用 Tab 键 移动 
到 某 个 链接 然后 按 下 回 车 键 的 动作 也 会 触发 onclick 事件 。 从 这 一 点 来 看 , 把 它 命 名 为 onactivate 
也 许 更 恰如其分 。 

围绕 着 onclick 和 onkeypress 有 许多 让 人 困惑 的 东西 ， 它 们 的 名 字 是 造成 这 些 困 惑 的 主要 原 
因 。 有 些 可 用 性 指南 建议 我 们 在 处 理 onclick 事件 时 也 一 定 要 处 理 onkeypress 事件 。 事 实 上 ， 这 
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种 搭配 导致 的 问题 远 比 它们 解决 的 更 多 。 

最 好 不 要 使 用 onkeypress 事件 处 理 函 数 。onclick 事件 处 理 函 数 已 经 能 满足 需要 。 虽 然 它 叫 
“onclick”， 但 它 对 键盘 访问 的 支持 相当 完美 。 

下 面 是 最 终 完 成 的 prepareGallery() 和 showPic() 函 数 的 代码 清单 : 


function prepareGallery() { 
if (!document.getElementsByTagName) return false; 
if (ldocument.getElementById) return false; 
if (ldocument.getElementById("imagegallery")) return false; 
var gallery = document.getElementByIld("imagegallery"); 
var links = gallery.getElementsByTagName("a"); 
for ( var i=0; i < links.length; i++) { 


links[i].onclick = function() { 
return showPic(this) ? false : true; 
} 
} 


function showPic(whichpic) { 

if (!document.getElementById("placeholder")) return false; 

var source = whichpic.getAttribute("href"); 

var placeholder = document.getElementById("placeholder"); 

if (placeholder.nodeName != "IMG") return false; 

placeholder. setAttribute("src",source); 

if (document.getElementById("description")) { 
var text = whichpic.getAttribute("title") ? whichpic.getAttribute("title") : ""; 
var description = document.getElementById("description"); 
if (description.firstChild.nodeType == 

description.firstChild.nodeValue = text; 


} 


return true; 


} 


注意 可 以 在 Friends of ED 网 站 (http:/www.friendsofed.com) 上 找到 本 书 的 页 面 来 下 载 这 两 个 
函数 的 最 终 完 整 版 本 。 


6.7 把 JavaScript 与 CSS 结合 起 来 


把 JavaScript 代码 从 HTML 文档 里 分 离 出 去 还 带 来 另 一 个 好 处 。 在 把 内 艇 型 事件 处 理 函 数 移 
出 标记 文档 时 ， 我 在 文档 里 为 JavaScript 代码 留 下 了 一 个 “ 挂 钧 ”: 

<ul id="imagegallery"> 

这 个 挂钩 完全 可 以 用 在 CSS 样式 表 里 。 

比如 说 , 如果 不 想 把 图 片 清单 显示 成 一 个 带 项 目 符号 的 列表 , 则 完全 可 以 利用 这 个 imagegallery 
写 出 一 条 如 下 所 示 的 CSS 语句 : 


#imagegallery { 
list-style: none; 
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我 可 以 把 这 条 CSS 语句 存 和 一 个 外 部 文件 ， 比 如 1ayout .css 文件 ， 然 后 再 从 gallery .ntml 
文件 的 <head> 部 分 引用 它 ， 

<link rel="stylesheet” href="styles/layout.css” type="text/css” media="screen" /> 

利用 CSS， 甚 至 可 以 让 这 份 清单 里 的 列表 项 从 按 纵向 显示 变 成 按 横向 显示 : 


#imagegallery li { 
display: inline; 


上 面 这 两 条 CSS 语句 将 使 我 的 网 页 变 成 如 图 6-1 所 示 的 样子 。 
「 ge Caliery ] 


Ea A 
LEL 


Snapshots 


Fireworks Coftfee Rose Big Ben 


My 
Image 
Gallery 


Choose an image. 


Done 


图 6-1 
即使 把 图 片 链接 换 成 一 些 缩微 图 而 不 是 文字 ，CSS 也 依然 有 效 : 


<ul id="imagegallery"> 
<1i> 
<a href="images/fireworks.jpg" title="A fireworks display"> 
<img src="images/thumbnail fireworks.jpg" alt="Fireworks” /> 
</a> 
</1i> 
<1i> 
«a href="images/coffee.jpg" title="A cup of black coffee” > 
<img src="images/thumbnail coffee.jpg”alt= Coffee”/> 
</a> 
</1i> 
<li> 
<a href="images/rose.jpg" title="A red, red TOse > 
<img src="images/thumbnail TYose.jpg” alt="Rose" /> 
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</a> 
</1i> 
<1i> 
<a href="images/bigben.jpg" title="The famous clock"> 
<img src="images/thumbnail bigben.jpg" alt="Big Ben" /> 
</a> 
</1i> 
</ul> 


6-2 是 这 个 网 页 的 新 形象 ， 图 片 链接 都 显示 为 缩 略图 而 不 是 文本 。 


My 
Image 
Gallery 


Choose an image 


Done 


下 面 是 1ayout .css 文件 的 完整 清单 : 


body { 
font-family: “Helvetica","Arial" ,serif; 
color: #333; 
background-color: #ccc; 
margin: 1em 10%; 
} 
hi { 
color: #333; 
background-color: transparent; 


af 
color: #c60; 
background-color: transparent; 
font-weight: bold; 
text-decoration: none; 

} 

ul { 
padding: 0; 


1i { 
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float: left; 
padding: 1em; 
list-style: none; 


} 
#imagegallery { 
list-style: none; 


#imagegallery li { 
display: inline; 


#imagegallery li a img { 
border: 0; 


这 份 样式 表 将 把 我 的 图 片 库 页 面 装点 得 既 美 观 又 大 方 ， 如 图 6-3 所 示 。 


Snapshots 
LS] 
My 
Image 
Gallery 
图 6-3 


6.8 DOM Core 和 HTML-DOM 


至 此 ， 我 在 编写 JavaScript 代码 时 只 用 到 了 以 下 几 个 DOM 方法 : 
DO getElementById 
口 getElementsByTagName 
OO getAttribute 
口 SetAttribute 

这 些 方法 都 是 DOM Core 的 组 成 部 分 。 它 们 并 不 专属 于 JavaScript， 支 持 DOM 的 任何 一 种 
程序 设计 语言 都 可 以 使 用 它们 。 它 们 的 用 途 也 并 非 仅 限于 处 理 网 页 ， 它 们 可 以 用 来 处 理 用 任何 一 
种 标记 语言 (比如 XML) 编写 出 来 的 文档 。 

在 使 用 JavaScript 语言 和 DOM 为 HIML 文件 编写 脚本 时 ， 还 有 许多 属性 可 供 先 用。 例如， 
我 已 经 使 用 了 一 个 属性 onclick， 用 于 图 片 库 中 的 事件 管理 。 这 些 属性 属于 HIML-DOM， 它 们 
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在 DOM Core 出 现 之 前 很 久 就 已 经 为 人 们 所 熟悉 了 。 
比如 说 ，HTML-DOM 提供 了 一 个 forms 对 象 。 这 个 对 象 可 以 把 下 面 这 样 的 语句 : 
document ,getElementsByTagName( "form") 
简化 为 : 
document ,forms 
类 似 地 ，HIML-DOM 还 提供 了 许多 描述 各 种 HTML 元 素 的 属性 。 比 如 说 , HTML-DOM 为 
图 片 提供 的 src 属性 可 以 把 下 面 这 样 的 语句 : 
element. getAttribute("src") 
简化 为 : 
element, src 
这 些 方法 和 属性 可 以 相互 替换 。 同 样 的 操作 既 可 以 只 使 用 DOM Core 来 实现 ， 也 可 以 使 用 
HTML-DOM 来 实现 。 正 如 大 家 看 到 的 那样 ， HTML-DOM 代码 通常 会 更 短 ， 必 须 提醒 一 下 ， 它 
们 只 能 用 来 处 理 Web 文档 。 如 果 你 打算 用 DOM 处 理 其 他 类 型 的 文档 ， 请 千 万 注意 这 一 点 。 
如 果 使 用 HIML-DOM 的 话 ， 就 可 以 把 showPic 写 得 简短 一 些 。 
下 面 这 条 语句 使 用 了 DOM Core 来 得 到 whichpic 元 素 的 href 属性 并 赋 给 变量 source: 
var source = whichpic.getAttribute("href"); 
下 面 是 使 用 HTML-DOM 达到 同样 目的 的 语句 : 
var source = whichpic.href; 


下 面 是 使 用 DOM Core 的 另 一 个 例子 , 这 次 把 placeholder 元 素 的 src 属性 设置 为 变量 Source 
的 值 : 

placeholder. setAttribute("src" ,source); 
下 面 是 使 用 HTML-DOM 达到 同样 目的 的 语句 : 

placeholder.src = source; 

即使 你 决定 只 使 用 DOM Core 方法， 也 应 该 了 解 HTML-DOM。 在 阅读 别人 编写 的 脚本 
时 难免 会 遇 到 各 种 HTML-DOM 记号 ， 你 至 少 应 该 知道 都 是 干什么 用 的 。 

在 本 书 的 绝 大 多 数 章节 里 ,我 只 使 用 DOM Core 来 编写 代码 。 虽然 代码 会 因此 而 变 得 有 点 儿 
见长 , 但 我 认为 DOM Core 方 法 更 容易 使 用 。 当 然 ， 你 不 必 和 我 一 样 ， 完 全 可 以 根据 个 人 喜好 和 
具体 情况 来 做 出 选择 。 我 会 尽 可 能 地 告诉 你 ， 在 哪些 地 方 可 以 用 HTML-DOM 来 简化 代码 。 


6.9 小 结 


在 本 章 里 ， 我 对 图 片 库 进行 了 多 项 优化 ， 我 的 HTML 标记 变 得 更 加 整齐 。 我 还 为 我 的 图 片 
库 网 页 提供 了 一 个 基本 的 CSS。 当 然 ， 最 重要 的 是 改进 了 JavaScript 代码 。 下 面 是 我 在 本 章 完 成 
的 几 项 主要 工作 。 
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口 尽量 让 我 的 JavaScript 代码 不 再 依赖 于 那些 没有 保证 的 假设 , 为 此 我 引入 了 许多 项 测试 和 
检查 。 这 些 测 试 和 检查 使 我 的 JavaScript 代码 能 够 平稳 退化 。 

口 没有 使 用 onkeypress 事件 处 理 函 数 ， 这 使 我 的 JavaScript 代码 的 可 访问 性 得 到 了 保证 。 

口 最 重要 的 是 把 事件 处 理 函 数 从 标记 文档 分 离 到 了 一 个 外 部 的 JavaScript 文件 。 这 使 我 的 
JavaScript 代码 不 再 依赖 于 HTML 文档 的 内 容 和 结构 。 

6-4 是 图 片 库 在 经 过 本 章 的 种 种 优化 之 后 的 样子 。 


ye Gallery 


The famous clock 


图 6-4 


我 认为 ， 结 构 与 行为 的 分 离 程度 越 大 越 好 。 

在 图 片 库 的 标记 文档 部 分 还 有 一 些 内 容 让 我 感到 不 大 满意 。 比 如 说 ，placeholder 和 
description 元 素 是 单纯 为 了 showPic 函数 而 存在 的 ， 但 不 支持 或 禁用 了 JavaScript 功能 的 浏览 器 
也 会 把 它们 呈现 出 来 ， 这 就 难免 会 给 访问 者 带 来 不 便 甚至 是 困扰 。 

理想 的 情况 是 ， 让 这 两 个 元 素 只 在 遇 到 那些 支持 DOM 的 浏览 器 时 才 出 现在 HTML 文档 里 。 
在 下 一 章 里 ， 你 将 会 看 到 如 何 利 用 DOM 提供 的 方法 和 属性 去 创建 HTML 元 素 ， 并 把 它们 插入 
HTML 文档 的 。 


动态 创建 标记 


本 章 内 容 
口传 统 技 术 : document .write 和 innerHTML。 
口 深入 剖析 DOM 方法 : createElement、createTextNode、appendChild 和 insertBefore。 


此 前 见 过 的 绝 大 多 数 DOM 方法 只 能 用 来 查找 元 素 。getElementById 和 getElementsByTagName 
都 可 以 方便 快捷 地 找到 文档 中 的 某 个 或 某 些 特定 的 元 素 节 点 ， 这 些 元 素 随 后 可 以 用 诸如 
setAttribute (改变 某 个 属性 的 值 ) 和 nodevalue (改变 某 个 元 素 节点 所 包含 的 文本 ) 之 类 的 方法 
和 属性 来 处 理 。 我 的 图 片 库 就 是 这 样 实现 的 。showPic 函数 先 找 出 id 属性 值 是 placeholder 和 
description 的 两 个 元 素 ， 然 后 刷新 它们 的 内 容 。placeholder 元 素 的 Src 属性 是 用 setAttribute 修 
改 的 ,description 元 素 所 包含 的 文本 是 用 nodeValue 属性 修改 的 。 在 这 两 种 情况 里 ,都 是 对 已 经 存 
在 的 元 素 做 出 修改 。 

这 是 绝 大 多 数 JavaScript 国 数 的 工作 原理 。 网 页 的 结构 由 标记 负责 创建 ，JavaScript 函数 只 用 
来 改变 某 些 细节 而 不 改变 其 底层 结构 。JavaScript 也 可 以 用 来 改变 网 页 的 结构 和 内 容 。 本 章 中 ， 
你 将 学 习 一 些 DOM 方法 ， 通 过 创建 新 元 素 和 修改 现 有 元 素来 改变 网 页 结构 。 


7.1 一 些 传统 方法 


在 学 习 利用 DOM 方法 在 Web 浏览 器 中 往 文档 添加 标记 时 , 先 回顾 两 个 过 去 使 用 的 技术 , 即 
document .write 和 innerHTML 。 


7.1.1 document .write 


document 对 象 的 write() 方 法 可 以 方便 快捷 地 把 字符 串 插 入 到 文档 里 。 
请 把 以 下 标记 代码 保存 为 一 个 文件 ， 文 件 名 就 用 test.html 好 了 。 


<!DOCTYPE html> 
<html lang="en"> 
<head> 

<meta charset="utf-8" /> 

<title>Test</title> 
</head> 
<body> 

<script> 

document .write("<p>This is inserted.</p>"); 
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</script> 
</body> 
</html> 


如 果 把 test.html 文件 加 载 到 Web 浏览 器 里 , 你 将 看 到 内 容 为 “This is inserted.” 的 文本 段落 ， 
如 图 7-1 所 示 。 


[和 日 中 Test S| 
詹 昌 介 "OoO* © 


This is inserted. 


图 7-1 


document .write 的 最 大 缺点 是 它 违 背 了 “行为 应 该 与 表现 分 离 ” 的 原则 。 即 使 把 document .write 
语句 挪 到 外 部 函数 里 ， 也 还 是 需要 在 标记 的 <body> 部 分 使 用 <script> 标 签 才 能 调用 那个 函数 。 

下 面 这 个 函数 以 一 个 字符 串 为 参数 , 它 将 把 一 个 <p> 标 签 . 字 符 串 和 一 个 </p> 标 签 拼接 在 一 起 。 
拼接 后 的 字符 串 被 保存 到 变量 str， 然 后 用 document .write() 方 法 写 出 来 : 


function insertParagraph(text) { 
var str = "<p>"; 
str += text; 
str += "p>"; 
document .write(str); 


可 以 把 这 个 函数 保存 在 外 部 文件 example.js 里 。 为 了 调用 这 个 函数 ， 必 须 在 标记 里 插入 
<script> 标 签 : 


<!DOCTYPE html> 

<htm1 lang="en"> 

<head> 
<meta charset="utf-8" /> 
<title>Test</title> 
«<script src="example.js"> 
</script> 

</head> 

<body> 
<script> 

insertParagraph("This is inserted."); 

</script> 

</body> 

</html> 


像 上 面 这 样 把 JavaScript 和 HTML 代码 混杂 在 一 起 是 一 种 很 不 好 的 做 法 。 这 样 的 标记 既 不 容 
易 阅 读 和 编辑 ， 也 无 法 享受 到 把 行为 与 结构 分 离开 来 的 好 处 。 


98 第 7 章 动态 创建 标记 


这 样 的 文档 还 很 容易 导致 验证 错误 。 比 如 说 ， 在 第 一 个 例子 里 ，<script> 标 签 后 面 的 “<p>” 
很 容易 被 误 认 为 是 <p> 标 签 ， 而 在 <script> 标 签 的 后 面 打开 <p> 标 签 是 非法 的 。 事 实 上 ， 那 个 “<p>” 
和 “</p>” 只 不 过 是 一 个 将 被 插入 文档 的 字符 串 的 组 成 部 分 而 已 。 

还 有 ,MIME 类 型 application/xhtml+xml 与 document .write 不 兼容 ,浏览 器 在 呈现 这 种 XHTML 
文档 时 根本 不 会 执行 document .write 方法 。 

从 某 种 意义 上 讲 ， 使 用 document .write 方法 有 点 儿 像 使 用 <font> 标 签 去 设 定 字体 和 颜色 。 虽 
然 这 两 种 技术 在 HTML 文档 里 都 工作 得 不 错 ， 但 它们 都 不 够 优雅 。 

把 结构 、 行 为 和 样式 分 开 永远 都 是 一 个 好 主意 。 只 要 有 可 能 ， 就 应 该 用 外 部 CSS 文件 代替 
<font> 标 签 去 设 定 和 管理 网 页 的 样式 信息 ， 最 好 用 外 部 JavaScript 文件 去 控制 网 页 的 行为 。 应 该 
避免 在 <body> 部 分 乱用 <script> 标 签 ， 避 免 使 用 document .write 方法 。 


7.1.2 innerHTML 属性 


现 如 今 的 浏览 器 几乎 都 支持 属性 innerHIML， 这 个 属性 并 不 是 W3C DOM 标准 的 组 成 部 分 ， 但 现 
已 经 包含 到 HTML5 规范 中 , 它 始 见于 微软 公司 的 正 4 浏 览 器 ,并 从 那 时 起 逐渐 被 其 他 的 浏览 器 接受 。 

innerHTML 属性 可 以 用 来 读 、 写 某 给 定 元 素 里 的 HTML 内 容 。 要 了 解 它 如 何 工作 ， 请 把 下 面 
这 段 代码 插 入 test.html 文档 的 <body> 部 分 : 


<div id="testdiv"> 
<p>This is <em>my</em> content.</p> 


</div> 
用 DOM 的 眼睛 看 testdiv 内 的 标记 ， 是 如 图 7-2 所 示 的 结构 。 
元 素 节 点 
div 
属性 节点 
元 素 节点 
id = 
"testdiv" 了 
文本 节点 sp D2 文本 节点 
This is em content. 
文本 节点 
my 


7.1 一 些 传统 方法 99 


div 元 素 的 id 是 testdiv。 它 包含 一 个 元 素 闻 点 (p 元 素 )。 这 个 p 元 素 又 有 一 些 子 节 点 。 其 
中 有 两 个 文本 节点 ， 值 分 别 是 This is 和 content。 还 有 一 个 元 素 节点 (em 元 素 ) ，enm 元 素 本 身 包 
含 一 个 文本 节点 ， 这 个 文本 节点 的 值 是 my。 

DOM 提供 了 关于 这 个 标记 的 非常 详细 的 一 幅 图 画 。 使 用 DOM 提供 的 方法 和 属性 可 以 对 任 
何 一 个 节点 进行 单独 的 访问 。 这 个 标记 从 innerHTML 属性 的 角度 来 看 则 简单 得 多 ， 如 图 7-3 所 示 ， 
就 innerHTML 属性 看 来 , id 为 testdiv 的 标记 里 面 只 有 一 个 值 为 <p>This is <em>my</em> content .</p> 
的 HTML 字符 串 。 


元 素 节 点 


div 


<p>This is “em>my</em> content.</p> 


HTML 
图 7-3 
用 下 面 这 个 新 函数 更 新 example.js 文件 。 
window.onload = function() { 


var testdiv = document.getElementById("testdiv"); 
alert(testdiv.innerHTML); 


然后 在 Web 浏览 器 里 刷新 test.htm] 页 面 ,div 元 素 ( 它 的 id 属性 值 等 于 testdiv) 的 innerHTML 
属性 值 将 显示 在 一 个 alert 对 话 框 里 ， 如 图 7-4 所 示 。 


f= = 


点 了 4 © 


了 <p>This is <em>my</em> content.</p> 
This is my conte 


Eo 


图 7-4 


很 明显 ，innerHTML 属性 无 细节 可 言 。 要 想 获得 细节 ， 就 必须 使 用 DOM 方法 和 属性 。 标 准 化 
的 DOM 像 手术 刀 一 样 精细 ，innerHTML 属性 就 像 一 把 大 锤 那样 粗放 。 

大 锤 有 大 锤 的 用 武之 地 。 在 你 需要 把 一 大 段 HTML 内 容 插入 网 页 时 ，innerHTML 属性 更 适用 。 
它 既 支持 读 取 ， 又 支持 写 和 人， 你 不 仅 可 以 用 它 来 读 出 元 素 的 HTML 内 容 ， 还 可 以 用 它 把 HTML 
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内 容 写 人 元 素 。 
编辑 test.html 文件 ， 让 id 属性 值 等 于 testdiv 的 元 素 变 成 空白 : 


<div id="testdiv "> 
</div> 


把 下 面 这 段 JavaScript 代码 放 入 example.js 文件 ， 就 可 以 把 一 段 HTML 内 容 插 入 这 个 <div> 
标签 : 


window.onload = function() { 
var testdiv = document.getElementById("testdiv"); 
testdiv.innerHTML = "<p?I inserted <em>this</em> content.</p>"; 


在 Web 浏览 器 里 刷新 test.html 文件 ， 你 就 可 以 看 到 如 图 7-5 所 示 的 结果 。 


AAA Testing 
OA lo* 


I inserted this content. 


图 7-5 


利用 这 个 技术 无 法 区 分 “插入 一 段 HTML 内 容 ” 和 “替换 一 段 HTML 内 容 ”。testdiv 元 素 
里 有 没有 HTML 内 容 无 关 紧 要 : 一 旦 你 使 用 了 innerHTML 属性 ， 它 的 全 部 内 容 都 将 被 替换 。 

在 test.html 文件 里 ， 把 id 属性 值 等 于 testdiv 的 元 素 的 内 容 修改 回 它 原来 的 样子 : 

<div id="testdiv"> 

<p>This is 《em>my</em> content.</p> 

</div> 

example.js 文件 保持 不 变 。 如 果 你 在 Web 浏览 器 里 刷新 test.html 文件 ， 结 果 将 和 刚才 一 样 。 
包含 在 testdiv 元 素 里 HTML 内 容 被 innerHIML 属性 完全 改变 了 ， 原 来 的 HIML 内 容 未 留 下 任何 
痕迹 。 

在 需要 把 一 大 段 HTML 内 容 插 入 一 份 文档 时 ，innerHTML 属性 可 以 让 你 又 快 又 简单 地 完成 这 
一 任务 。 不 过 ，innerHTML 属性 不 会 返回 任何 对 刚 插 入 的 内 容 的 引用 。 如 果 想 对 刚 插入 的 内 容 进 
行 处 理 ， 则 需要 使 用 DOM 提供 的 那些 精确 的 方法 和 属性 。 

innerHTML 属性 要 比 document .write() 方 法 更 值得 推荐 。 使 用 innerHTIML 属性 ， 你 就 可 以 把 
JavaScript 代码 从 标记 中 分 离 出 来 。 用 不 着 再 在 标记 的 <body> 部 分 插入 <script> 标 签 。 

类 似 于 document .write 方法 ，innerHTML 属性 也 是 HTML 专 有 属性 ， 不 能 用 于 任何 其 他 标记 
语言 文档 ,浏览 器 在 呈现 正宗 的 XHTML 文档 ( 即 MIME 类 型 是 application/xhtml+xml 的 XHTML 
文档 ) 时 会 直接 忽略 掉 innerHTIML 属性 。 

在 任何 时 候 , 标准 的 DOM 都 可 以 用 来 替代 innerHIML。 虽 说 这 往往 需要 多 编写 一 些 代码 才能 
获得 同样 的 效果 ， 但 DOM 同时 也 提供 了 更 高 的 精确 性 和 更 强大 的 功能 。 
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7.2 DOM 方法 


getElementById 和 getElementsByTagName 等 方法 可 以 把 关于 文档 结构 和 内 容 的 信息 检索 出 来 ， 
它们 非常 有 用 。 

DOM 是 文档 的 表示 。DOM 所 包含 的 信息 与 文档 里 的 信息 一 一 对 应 。 你 只 要 学 会 问 正确 的 问 
题 (使 用 正确 的 方法 )， 就 可 以 获取 DOM 节点 树 上 任何 一 个 节点 的 细节 。 

DOM 是 一 条 双向 车 道 。 不 仅 可 以 获取 文档 的 内 容 ， 还 可 以 更 新 文档 的 内 容 。 如 果 你 改变 了 
DOM 节点 树 ， 文 档 在 浏览 器 里 的 呈现 效果 就 会 发 生变 化 。 你 已 经 见识 过 setAttribute 方法 的 神 
奇 之 处 了 。 用 这 个 方法 可 以 改变 DOM 节点 树 上 的 某 个 属性 节点 ， 相 关 文档 在 浏览 器 里 的 呈现 就 
会 发 生 相 应 的 变化 。 不 过 ，setAttribute 方法 并 未 改变 文档 的 物理 内 容 ， 如 果 用 文本 编辑 器 而 不 
是 浏览 器 去 打开 这 个 文档 , 我 们 将 看 不 到 任何 变化 。 只 有 在 用 浏览 器 打开 那 份 文档 时 才能 看 到 文 
档 呈现 效果 的 变化 。 这 是 因为 浏览 器 实际 显示 的 是 那 棵 DOM 节点 树 。 在 浏览 器 看 来 ，DOM 节 
点 树 才 是 文档 。 

一 旦 明白 了 这 个 道理 , 以 动态 方式 实时 创建 标记 就 不 那么 难以 理解 了 ,你 并 不 是 在 创建 标记 ， 
而 是 在 改变 DOM 节点 树 。 做 到 这 一 点 的 关键 是 一 定 要 从 DOM 的 角度 去 思考 问题 。 

在 DOM 看 来 ， 一 个 文档 就 是 一 棵 节点 树 。 如 果 你 想 在 节点 树 上 添加 内 容 ， 就 必须 插入 新 的 
节点 。 如 果 你 想 添 加 一 些 标记 到 文档 ， 就 必须 插入 元 素 节 点 。 


7.2.1 ”createElement 方法 


编辑 test.html 文件 ， 让 id 等 于 testdiv 的 那个 <div> 标 签 的 内 容 变 成 空白 : 


<div id= "testdiv "> 
</div> 


我 想 把 一 段 文本 插入 testdiv 元 素 。 用 DOM 的 语言 来 说 ， 就 是 想 添加 一 个 p 元 素 市 点 ， 并 
把 这 个 布点 作为 div 元 素 节 点 的 一 个 子 节点 。(div 元 素 市 点 已 经 有 了 一 个 子 市 点 ， 那 是 一 个 id 
属性 节点 ， 值 是 testdiv) 。 

这 项 任务 需要 分 两 个 步 又 完成 

(1) 创建 一 个 新 的 元 素 ; 

(2) 把 这 个 新 元 素 插入 节点 树 。 

第 一 个 步骤 要 用 DOM 方法 createElement 来 完成 。 下 面 是 使 用 这 个 方法 的 语法 : 

document. createElement (nodeName) 

下 面 这 条 语句 将 创建 一 个 Pp 元素 : 

document.createElement("p"); 

这 个 方法 本 身 并 不 能 影响 页 面 表现 , 还 需要 把 这 个 新 创建 出 来 的 元 素 插入 到 文档 中 去 。 为 此 ， 
你 需要 有 个 东西 来 引用 这 个 新 创建 出 来 的 节点 。 不 论 何 时 何 地 ， 只 要 你 使 用 了 createElement 方 
法 ， 就 应 该 把 新 创建 出 来 的 元 素 赋 给 一 个 变量 就 总 是 个 好 主意 : 


var para = document.createElement("p"); 
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变量 para 现在 包含 着 一 个 指向 刚 创建 出 来 的 那个 p 元 素 的 引用 。 现 在 ， 虽 然 这 个 新 创建 出 
来 的 p 元素 已 经 在 在 了 , 但 它 还 不 是 任何 一 棵 DOM 节点 树 的 组 成 部 分 , 它 只 是 游荡 在 JavaScript 
世界 里 的 一 个 孤儿 。 它 这 种 情况 称 为 文档 碎片 (document fragment)， 还 无 法 显示 在 浏览 器 的 窗口 
画面 里 。 不 过 ， 它 已 经 像 任 何其 他 的 节点 那样 有 了 自己 的 DOM 属性 。 

这 个 无 家 可 归 的 p 元 素 现在 已 经 有 一 个 nodeType 和 一 个 nodeName 值 ， 如 图 7-6 所 示 。 这 一 事 
实 可 以 用 下 面 这 段 代码 来 验证 (把 以 下 代码 放 入 example.js 文件 并 在 浏览 器 里 刷新 test.html 文 
档 )。 


window.onload = function() { 
Var para = document.createElement("p"); 
Var info = "nodeName: "; 
info+= para.nodeName; 
info+r= ”nodeType: "; 
info+= para.nodeType; 
alert(info); 


nodeName: P nodeType: 1 


图 7-6 


新 节点 确实 已 经 存在 ， 它 有 一 个 取 值 为 的 nodeName 属性 。 它 还 有 一 个 取 值 为 1 的 nodeType 
属性 ， 而 这 意味 着 它 是 一 个 元 素 节 点 。 不 过 ， 这 个 节点 现在 还 未 被 连接 到 test.html 文档 的 节点 
树 上 。 


7.2.2 appendChi1d 方 法 


把 新 创建 的 节点 播 入 某 个 文档 的 节点 树 的 最 简单 的 办 法 是 , 让 它 成 为 这 个 文档 某 个 现 有 节点 
的 一 个 子 节 点 。 

具体 到 这 个 例子 ， 是 要 把 一 段 新 文本 插入 到 test .html 文档 中 id 是 testdiv 的 元 素 闻 点 。 换 
句 话 说 ,我 想 让 新 创建 的 p 元 素 成 为 testdiv 元 素 的 一 个 子 节点 。 你 可 以 用 appendchild 方 法 来 完 
成 这 一 任务 。 下 面 是 appendChild 方 法 的 语法 : 

parent.appendChild(child) 

具体 到 test.ntml 文档 这 个 例子 ， 上 面 这 个 语法 中 的 child 就 是 刚才 用 createElement 方法 创 
建 出 来 的 ，parent 就 是 id 是 testdiv 的 元 素 市 点 。 我 需要 用 一 个 DOM 方法 得 到 “testdiv” 布 点 ， 
最 简单 的 办 法 是 使 用 getElementById 方法。 

像 往常 一 样 ， 你 把 这 个 元 素 赋 给 一 个 变量 ， 这 可 以 让 你 的 代码 简明 易 读 : 

var testdiv = document.getElementById("testdiv"); 
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变量 testdiv 现在 包含 着 一 个 指向 那个 id 等 于 testdiv 的 元 素 的 引用 。 

在 上 一 小 市 我 创建 了 一 个 para 变量 ， 它 包含 一 个 指向 刚 创建 的 那个 p 元素 的 引用 : 

Var para = document.createElement("p"); 

有 了 这 些 ， 就 可 以 像 下 面 这 样 用 appendcni1d 方 法 把 变量 para 插入 变量 testdiv 了 : 

testdiv.appendChild(para); 

新 创建 的 p 元 素 现在 成 为 了 testdiv 元素 的 一 个 子 节点 。 它 不 再 是 JavaScript 世界 里 的 一 个 孤 

它 已 经 被 插入 到 test .htm] 文档 的 节点 树 里 了 。 

在 使 用 appendChild 方法 时 ， 不 必 非 得 使 用 一 些 变量 来 引用 父 节 点 和 子 节 点 。 

可 以 把 上 面 这 条 语句 写成 下 面 这 样 : 
document .getElementById("testdiv").appendChild( document.createElement("p")); 
可 以 看 到 ， 上 面 这 样 的 代码 很 难 We 像 下 面 这 样 多 写 儿 行 ， 从 长 远 来 看 是 值得 的 : 
var para = document.createElement(" 


var testdiv = document. nn testdiv"); 
testdiv.appendChild(para); 


儿 


> 


尾 


事实 上， 完全 


7.2.3 createTextNode 方法 


个 空白 的 p 元 


你 现在 已 经 创建 出 了 一 个 元 素 市 点 并 把 它 插入 了 文档 的 市 点 树 , 这 个 市 点 是 一 
它 只 能 创建 元 素 节 点 


素 。 你 想 把 一 些 文本 放 入 这 个 p 元 素 , 但 createElement 方法 帮 不 上 
你 需要 创建 一 个 文本 节点 ， 你 可 以 用 createTextNode 方 法 来 实现 它 。 


注意 千 万 不 要 被 这 些 方法 的 名 字 弄 糊涂 。 如 果 这 些 方法 叫做 createElementNode 和 
createTextNode， 或 者 叫做 createElement 和 createText ， 都 会 非常 清楚 。 遗 憾 的 是 ， 它 们 
的 名 字 叫 做 createElement 和 createTextNode。 


createTextNode 的 语法 与 createElement 很 相似 : 

document ,createTextNode (text) 

下 面 这 条 语句 将 创建 出 一 个 内 容 为 “Hello world” 的 文本 布点 : 

document .createTextNode("Hello world"); 

和 刚才 一 样 ， 把 这 个 新 创建 的 节点 也 赋 给 一 个 变量 ; 

var txt = document.createTextNode("Hello world"); 

变量 txt 现在 包含 指向 新 创建 的 那个 文本 节点 的 引用 。 这 个 节点 现在 也 是 JavaScript 世界 里 
的 一 个 孤儿 ， 因 为 它 还 未 被 插入 任何 一 个 文档 的 节点 树 。 

可 以 用 appendChild 方法 把 这 个 文本 市 点 插入 为 某 个 现 有 元 素 的 子 市 点 。 我 将 把 这 个 文本 市 

点 插入 到 我 在 上 一 小 节 创 建 的 Pp 元素。 因为 在 上 一 小 市 里 我 已 经 把 那个 p 元 素 存 和 人 了 变量 para， 

现在 又 把 新 创建 的 文本 节点 存 和 人 了 变量 tXt， 所 以 现在 可 以 用 下 面 这 条 语句 来 达到 我 的 目的 : 
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para.appendChild(txt); 
内 容 为 “Hello world” 的 文本 节点 就 成 为 那个 p 元 素 的 一 个 子 节 点 了 。 
现在 ， 试 着 把 下 面 这 段 代 码 写 入 example.js 文件 : 


window.onload = function() { 
var para = document.createElement("p"); 
var testdiv = document.getElementById("testdiv"); 
testdiv.appendChild(para); 
var txt = document,.createTextNode("Hello world"); 
para.appendChild(txt); 


然后 在 浏览 器 里 重新 加 载 test .html 文件 ， 你 会 从 浏览 器 窗口 里 看 到 文本 “Hello world”， 如 
图 7-7 所 示 。 


Testing 


LI 


Hello world 


7-7 


这 个 例子 是 按照 以 下 顺序 来 创建 和 插入 节点 的 : 

(1) 创建 一 个 p 元 素 节 点 。 

(2) 把 这 个 p 元 素 节 点 追加 到 test.html 文档 中 的 一 个 元 素 节点 上 。 

(3) 创建 一 个 文本 节点 

(4) 把 这 个 文本 节点 追加 到 刚才 创建 的 那个 p 元 素 节 点 上 。 

appendChild 方 法 还 可 以 用 来 连接 那些 尚未 成 为 文档 树 一 部 分 的 布点 。 也 就 是 说 , 以 下 步 又 顺 
序 同样 可 以 达到 目的 。 

(1) 创建 一 个 p 元 素 节 点 。 

(2) 创建 一 个 文本 节点 

(3) 把 这 个 文本 节点 追加 到 第 1 步 创建 的 p 元 素 节 点 上 。 

(4) 把 这 个 p 元 素 节 点 追加 到 test.html 文档 中 的 一 个 元 素 节 点 

下 面 是 按照 新 步骤 编写 出 来 的 函数 : 
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window.onload = function() { 
var para = document.createElement("p"); 
var txt = document.createTextNode("Hello world"); 
para.appendChild(txt); 
var testdiv = document.getElementById("testdiv"); 
testdiv.appendChild(para); 
最 终 的 结果 是 一 样 的 。 把 上 面 这 些 代码 写 入 example.js 文件 ， 并 在 浏览 器 里 重新 加 载 


test .html 文件 。 你 会 看 到 文本 “Hello world”， 就 像 刚 才 一 样 。 


7.2.4 ”一 个 更 复杂 的 组 合 
刚才 介绍 innerHTML 属性 上 时， 我 使 用 了 如 下 所 示 的 HTML 内 容 : 


<p>This is <em>my</em> content.</p> 
与 创建 一 个 包含 着 一 些 文本 的 p 元 素 相 比 ， 这 个 步 又 要 复杂 不 少 。 为 了 把 这 些 标记 插入 
test .html 文档 ， 先 把 它 转换 为 一 棵 市 点 树 。 


This is em content. 


如 图 7-8 所 示 ， 这 些 HTML 内 容 对 应 着 一 个 p 元 素 节 点 ， 它 本 身 又 包含 着 以 下 子 节 点 。 
D 一 个 文本 节点 ， 其 内 容 是 “This is” 

D 一 个 元 素 节 点 “em”， 这 个 元 素 节 点 本 身 还 包含 着 一 个 文本 节点 ， 其 内 容 是 “my 
口 一 个 文本 节点 ， 其 内 容 是 “content.” 

把 需要 创建 哪些 节点 的 问题 弄 清 楚 后 ， 我 们 能 制定 出 一 个 妥善 的 行动 计划 。 

(1) 创建 一 个 p 元 素 节 点 并 把 它 赋 给 变量 para。 

(2) 创建 一 个 文本 节点 并 把 它 赋 给 变量 txt1。 

GB) 把 txtl 追 加 到 para 上 。 

(4) 创建 一 个 em 元 素 节点 并 把 它 赋 给 变量 emphasis。 

(5) 创建 一 个 文本 节点 并 把 它 赋 值 给 变量 txt2。 
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(6) 把 txt2 追加 到 emphasis 上 。 

(7) 把 emphasis 追加 到 para 上 。 

(8) 创建 一 个 文本 节点 并 把 它 赋 值 给 变量 txt3。 

(9) 把 txt3 追加 到 para 上 。 

(10) 把 para 追加 到 test .html 文档 中 的 testdiv 元 素 上 。 
下 面 是 根据 上 述 步 骤 编 写 出 来 的 JavaScript 代码 : 


window.onload = function() { 
var para = document.createElement("p"); 
var txt1 = document.createTextNode("This is "); 
para.appendChild(txt1); 
var emphasis = document.createElement("em"); 
var txt2 = document ,createTextNode("my"); 
emphasis.appendChild( txt2); 
para.appendChild(emphasis); 
var txt3 = document.createTextNode(" content."); 
para.appendChild(txt3); 
var testdiv = document.getElementById("testdiv"); 
testdiv.appendChild(para); 


把 上 面 这 些 代码 写 入 example.js 文件 ， 然 后 在 浏览 器 里 重新 加 载 test.html 文档 。 

如 果 你 愿意 ， 可 以 采用 一 种 不 同 的 方案 。 可 以 先 把 所 有 的 节点 都 创建 出 来 , 然后 再 把 它们 连 
接 在 一 起 。 下 面 是 按照 这 一 思路 制定 出 来 的 行动 计划 。 

(1) 创建 一 个 p 元 素 节 点 并 把 它 赋值 给 变量 para。 

(2) 创建 一 个 文本 节点 .并 把 它 赋值 给 2 变量 txt1。 

(3) 创建 一 个 妈 元素 节 点 并 把 它 赋值 给 变量 emphasis。 

(4) 创建 一 个 文本 节点 并 把 它 赋 值 给 变量 txt2。 

(5) 创建 一 个 文本 节点 并 把 它 赋 值 给 变量 txt3。 

(6) 把 txtl 追加 到 para 上 。 

(7) 把 txt2 追加 到 emphasis 上 。 

(8) 把 emphasis 追加 到 para 上 。 

(9) 把 txt3 追加 到 para 上 。 

(10) 把 para 追加 到 test .html 文档 中 的 testdiv 元 素 上 。 

下 面 是 根据 上 述 步 骤 编 写 出 来 的 JavaScript 代码 : 


window.onload = function() { 
var para = document.createElement("p"); 
var txt1 = document.createTextNode("This is "); 
var emphasis = document.createElement ("em"); 
var txt2 = document.createTextNode("my"); 
var txt3 = document.createTextNode(” content."); 
para.appendChild(txt1); 
emphasis.appendChild(txt2); 
para.appendChild(emphasis); 
para.appendChild(txt3); 
var testdiv = document.getElementById("testdiv"); 
testdiv.appendChild(para); 


7.3 重 回 图 片 库 107 


如 果 把 上 面 这 些 代码 写 入 example.js 文件 ， 然 后 在 浏览 器 里 重新 加 载 test .html 文档 ， 将 看 
到 与 前 面 一 模 一 样 的 结果 。 

可 以 看 到 ， 把 新 节点 插入 某 个 文档 的 节点 树 的 办 法 并 非 只 有 一 种 。 即 使 决定 永远 也 不 使 用 
document .write 方法 或 innerHTML 属性 ,在 使 用 DOM 方法 去 创建 和 插入 新 节点 时 你 也 可 以 灵活 地 
做 出 多 种 选择 。 
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现在 ， 我 将 向 你 展示 一 个 动态 创建 HTML 内 容 的 实用 案例 。 在 上 一 章 里 ， 我 们 对 图 片 库 脚 
本 做 了 许多 改进 。 我 们 做 到 了 让 JavaScript 代码 与 HIML 分 离 , 并 针对 各 种 情况 做 到 了 平稳 退化 ， 
我 们 还 做 了 一 些 访问 性 有 关 的 改进 。 

不 过 ， 还 有 一 些 内 容 让 我 感到 不 太 满 意 。 看 一 下 gallery.html 文件 中 的 标记 : 

<!DOCTYPE html> 

<htm1 lang="en"> 

<head> 

<meta charset="utf-8" /> 

<title>Image Gallery</title> 

<link rel="stylesheet” href="styles/layout.css" media="screen" /> 
</head> 

<body> 

<h1i>Snapshots</h1> 
<ul id="imagegallery"> 
<1i> 
<a href="images/fireworks.jpg" title="A fireworks display"> 
<img src="images/thumbnail fireworks.jpg" alt="Fireworks” /> 
</a> 
</li> 
<1i> 
<a href="images/coffee.jpg” title="A cup of black coffee” > 
<img src="images/thumbnail coffee.jpg” alt="Coffee” /> 
</a> 
</1i> 
<1i> 
«a href="images/rose.jpg" title="A red, red rose"> 
<img src="images/thumbnail rose.jpg" alt="Rose" /> 
</a> 
</li> 
<1i> 
«a href="images/bigben.jpg" title="The famous clock"> 
<img src="images/thumbnail bigben.jpg” alt="Big Ben” /> 
</a> 
</1i> 
</ul> 
<img id="placeholder" src="images/placeholder.gif" alt="my image gallery” /> 
<p id="description">Choose an image.</p> 
«script src="scripts/showpic.js"></script> 
</body> 
</html> 


这 个 XHTML 文件 中 有 一 个 图 片 和 一 段 文 字 仅仅 是 为 showPic 脚本 服务 的 。 若 能 把 结构 和 行 
为 彻底 分 开 那 最 好 不 过 了 。 既 然 这 些 元 素 的 存在 只 是 为 了 让 DOM 方法 处 理 它们 ， 那 么 用 DOM 
方法 来 创建 它们 才 是 最 合适 的 选择 。 

第 一 步 非 常 简单 : 把 这 些 元 素 从 gallery.html 文档 里 删 掉 。 接 下 来 , 我 们 编写 一 些 JavaScript 
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代码 把 它们 动态 地 创建 出 来 。 

我 们 先 编写 一 个 函数 preparePlaceholder 并 把 它 放 进 showPic.js 文件 ， 然 后 在 文档 加 载 时 调 
用 这 个 函数 。 下 面 是 这 个 函数 要 完成 的 任务 。 

(1) 创建 一 个 img 元 素 节点 

(2) 设置 这 个 节 点 的 记 属性。 

(G3) 设置 这 个 节点 的 Src 属性 。 

(4) 设置 这 个 节点 的 alt 属性 。 

(5) 创建 一 个 p 元 素 节点 。 

(6) 设置 这 个 节点 的 id 属性 。 

(7) 创建 一 个 文本 节点 

(8) 把 这 个 文本 节点 追加 到 p 元 素 上 。 

(9) 把 p 元 素 和 img 元素 插入 到 gallery.html 文档 。 

创建 这 些 元 素 和 设置 各 有 关 属 性 的 工作 比较 明确 。 我 们 在 这 里 组 合 使 用 了 createElement()、 
createTextNode() 和 setAttribute() 方 法 : 


var placeholder = document.createElement("img"); 
placeholder.setAttribute("id","placeholder"); 
placeholder.setAttribute("src","images/placeholder.gif"); 
placeholder.setAttribute("alt","my image gallery"); 

Var description = document.createElement("p"); 
description,.setAttribute("id","description"); 

Var desctext = document.createTextNode("Choose an image"); 


接 下 来 ， 我 们 用 appendChi1d( ) 方 法 把 新 创建 的 文本 节点 插入 p 元 素 : 

description.appendChild(desctext); 

最 后 一 步 是 把 新 创建 的 元 素 插入 文档 。 很 凑巧 ， 因 为 图 片 清单 〈<ul> .. .</ul>) 刚好 是 文 
档 中 的 最 后 一 个 元 素 , 所 以 如 果 把 placeholder 和 description 元 素 追 加 到 body 元 素 节 点 上 , 它们 
就 会 出 现在 图 片 清单 的 后 面 。 我 们 可 以 通过 标签 名 “body” 引 用 body 标签 (作为 第 一 个 也 是 唯 
一 一 个 body 元 素 的 引用 )。 


document .getElementsByTagName("body" )[0] .appendChild(placeholder); 
document ,getElementsByTagName( "body" )[0].appendChild(description); 


当然 ， 也 可 以 使 用 HTML-DOM 提供 的 属性 body: 


document.body.appendChild(placeholder); 
document .body.appendChild(description); 


这 两 组 语句 都 会 把 placeholder 和 description 元 素 插入 到 位 于 文档 末尾 的 </body> 标 签 之 前 。 

以 上 代码 工作 得 很 好 ， 但 这 一 切 都 依赖 于 一 个 细节 : 图 片 清单 刚好 是 <body> 部 分 的 最 后 一 个 
元 素 。 如 果 在 这 个 图 片 清单 的 后 面 还 有 一 些 其 他 的 内 容 该 怎么 办 ? 我 们 的 真实 想法 是 ,让 新 创建 
的 元 素 紧 跟 在 图 片 清单 的 后 面 ， 而 不 管 这 个 清单 出 现在 文档 中 的 什么 地 方 。 


7.3.1 在 已 有 元 素 前 插入 一 个 新 元 素 
DOM 提供 了 名 为 insertBefore() 方 法 ， 这 个 方法 将 把 一 个 新 元 素 插 入 到 一 个 现 有 元 素 的 前 
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面 。 在 调用 此 方法 时 ， 你 必须 告诉 它 三 件 事 。 

(1) 新 元 素 : 你 想 插 入 的 元 素 (newE7ement)。 

(2) 目标 元 素 : 你 想 把 这 个 新 元 素 插 入 到 哪个 元 素 (targetE7ement) 之 前 。 

(3) 父 元 素 : 目标 元 素 的 父 元 素 (parentE7ement)。 

下 面 是 这 个 方法 的 调用 语法 : 

parentElement.insertBefore(newElement, targetElement) 

我 们 不 必 搞 清楚 父 元 素 到 底 是 哪个 ， 因 为 targetElement 元 素 的 parentNode 属性 值 就 是 它 。 
在 DOM 里 ， 元 素 节 点 的 父 元 素 必 须 是 另 一 个 元 素 节 点 〈 属 性 节点 和 文本 节点 的 子 元 素 不 允许 是 
元 素 节 点 )。 

比如 说 ， 下 面 这 条 语句 可 以 把 placeholder 和 description 元 素 插入 到 图 片 清单 的 前 面 (还 记 
得 吗 ， 图 片 清单 的 id 是 imagegallery): 


var gallery = document.getElementById("imagegallery"); 
gallery.parentNode.insertBefore(placeholder, gallery); 


此 时 , 变量 gallery 的 parentNode 属性 值 是 body 元 素 , 所 以 placeholder 元 素 将 被 插入 为 body 
元 素 的 新 子 元 素 ， 它 被 插入 到 它 的 兄弟 元 素 gallery 的 前 面 。 

还 可 以 把 description 元素 也 插入 到 gallery 元 素 之 前 ， 成 为 它 的 一 个 兄弟 元 素 : 

gallery.parentNode.insertBefore(description,gallery); 


在 gallery 清单 的 前 面 插入 placeholder 图 片 和 description 文本 段 的 效果 如 图 7-9 所 示 。 
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图 7-9 
这 种 效果 其 实 也 不 错 ,但 我 们 刚才 说 的 是 把 新 创建 的 元 素 插入 到 图 片 清单 的 后 面 ,而 不 是 前 面 。 
7.3.2 ”在 现 有 元 素 后 插入 一 个 新 元 素 


你 可 能 会 想 : 既然 有 一 个 insertBefore 方 法 ,是 不 是 也 有 一 个 相应 的 insertAfter() 方 法 。 很 
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可 惜 ，DOM 没有 提供 这 个 方法 。 

1. 编写 insertAfter 函 数 

虽然 DOM 本 身 没 有 提供 insertAfter 方法 ,但 它 确实 提供 了 把 一 个 节点 播 入 到 另 一 个 节点 之 
后 所 需 的 所 有 工具 。 我 们 完全 可 以 利用 已 有 的 DOM 方法 和 属性 编写 一 个 insertAfter 函数 : 


function insertAfter(newElement, targetElement) { 
var parent = targetElement.parentNode; 
if (parent.1lastChild == targetElement) { 
parent.appendChild(newElement); 
} else { 
parent.insertBefore(newElement, targetElement .nextSibling); 


一 一 
-一 


这 个 函数 用 到 了 以 下 DOM 方法 和 属性 : 
parentNode 属性 
lastChild 属性 
appendChild 方 法 
insertBefore 方法 
nextSibling 属性 

下 面 ， 请 看 看 这 个 函数 是 如 何 一 步 一 步 地 完成 工作 的 。 

(1) 首先 ， 这 个 函数 有 两 个 参数 : 一 个 是 将 被 插入 的 新 元 素 ， 另 一 个 是 目标 元 素 。 这 两 个 参 
数 通 过 变量 newElement 和 targetElement 被 传递 到 这 个 函数 : 

function insertAfter(newElement,targetElement) 

(2) 把 目标 元 素 的 parentNode 属性 值 保存 到 变量 parent 里 ; 

var parent = targetElement.parentNode 

(3) 接 下 来 ， 检 查 目 标 元 素 是 不 是 parent 的 最 后 一 个 子 元 素 ， 即 比较 parent 元 素 的 
lastChild 属性 值 与 目标 元 素 是 否 存在 “等 于 ”关系 ; 

if (parent.1lastChild == targetElement) 

(4) 如 果 是 ， 就 用 appendChild 方法 把 新 元 素 追 加 到 parent 元 素 上 ， 这 样 新 元 素 就 恰好 被 插 
入 到 目标 元 素 之 后 : 

parent.appendChild(newElement) 

(5) 如 果 不 是 ， 就 把 新 元 素 插 入 到 目标 元 素 和 目标 元 素 的 下 一 个 兄弟 元 素 之 间 。 目 标 元 素 的 
下 一 个 兄弟 元 素 即 目标 元 素 的 nextSibling 属性 。 用 insertBefore 方法 把 新 元 素 插入 到 目标 元 素 
的 下 一 个 兄弟 元 素 之 前 : 

parent.insertBefore(newElement, targetElement.nextSibling) 

表面 上 看 ， 这 是 一 个 相当 复杂 的 函数 ， 但 只 要 把 它 分 成 儿 个 小 部 分 来 理解 ， 就 很 容易 搞 清 
楚 。 即使 你 现在 还 不 能 完全 明白 也 不 要 紧 。 等 你 对 insertAfter 函数 所 用 到 的 DOM 方法 和 属性 更 
加 熟悉 时 ， 你 自然 就 能 完全 理解 它 。 

类 似 于 第 6 章 出 现 的 addLoadEvent 函数 ，insertAfter 国 数 也 非常 实用 ,应 该 把 它们 都 收录 到 
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你 的 脚本 里 。 
2. 使 用 insertAfter 函 数 
我 们 将 insertAfter 图 数 用 在 我 的 preparePlaceholder 国 数 中 。 首 先 ， 得 到 图 片 清 单 
var gallery = document.getElementById("imagegallery"); 
接 下 来 ， 把 placeholder (这 个 变量 对 应 着 新 创建 出 来 的 img 元 素 ) 插入 到 gallery 的 后 面 : 
insertAfter(placeholder,gallery); 
placeholder 图 片 现 在 成 了 gallery.html 文档 的 节点 树 的 组 成 部 分 , 而 我 们 希望 把 description 
文本 段 插 入 到 它 的 后 面 。 我 们 已 经 把 这 个 市 点 保存 在 变量 description 里 了 。 再 次 使 用 insertAfter() 
方法 ， 但 这 次 是 把 description 插入 到 placeholder 的 后 面 : 
insertAfter(description, placeholder); 
增加 了 上 面 这 儿 条 语句 之 后 ，preparePlaceholder 函数 变 成 了 如 下 的 相 


function preparePplaceholder() { 
var placeholder = document.createElement("img"); 
placeholder. setAttribute("id","placeholder"); 
placeholder. setAttribute("src","images/placeholder .gif"); 
placeholder. setAttribute("alt", "my image gallery"); 
var description = document. createElement ("p 
description.setAttribute("id","description"); 
var desctext = document .createTextNode( "Choose an image" ); 
description.appendChild(desctext); 
var gallery = document.getElementById("imagegallery"); 
insertAfter(placeholder,gallery); 
insertAfter(description,placeholder); 


tt 


于 


} 

事情 还 未 结束 , 这 个 函数 还 有 最 后 一 个 问题 没有 解决 : 我 在 新 增加 的 那儿 条 语句 里 使 用 了 一 
些 新 的 DOM 方法 ,但 没有 测试 浏览 器 是 否 支 持 它们 。 为 了 确保 这 个 函数 有 足够 的 退路 ， 还 需 

再 增加 几 条 i 吾 句 : 


function prepareplaceholder() { 
if (!document.createElement) return false; 
if (!document.createTextNode) return false; 
if (!document.getElementById) return false; 
if (!document.getElementById("imagegallery")) return false; 
Var placeholder = document,.createElement (“img"); 
placeholder.setAttribute("id","placeholder"); 
placeholder. setAttribute("src", "images/placeholder.gif"); 
placeholder.setAttribute("alt", "my image gallery"); 
Var description = document. createElement("p ) 
description.setAttribute("id","description" ); 
var desctext = document. createTextNode( "Choose an image"); 
description.appendChild(desctext); 
var gallery = document.getElementById("imagegallery"); 
insertAfter(placeholder,gallery); 
insertAfter(description,placeholder); 


} 
7.3.3 图片 库 二 次 改进 版 
现在 showPic.js 文件 包含 5 个 不 同 的 函数 ， 它 们 是 : 


wi 


112 第 7 章 动态 创建 标记 


addLoadEvent 函数 
insertAfter 函数 
preparePlaceholder 了 国 数 
prepareGallery 函数 
showPic 函数 
addLoadEvent 和 insertAfter 属于 通用 型 国 数 ， 它 们 在 许多 场合 都 能 派 上 用 场 。 
preparePlaceholder 函数 负责 创建 一 个 img 元 素 和 一 个 p 元素 。 这 个 函数 将 把 这 些 新 创建 的 
元 素 插 入 到 市 点 树 里 图 片 库 清单 的 后 面 。prepareGallery 函数 负责 处 理事 件 。 这 个 函数 将 遍历 处 
理 图 片 库 清单 里 的 每 个 链接 。 当 用 户 点 击 这 些 链 接 中 的 某 一 个 时 ， 就 会 调用 showPic 函数 。 
showPic 函数 负责 把 “ 占 位 符 ” 图 片 切 换 为 目标 图 片 。 
为 了 启用 这 些 功能 ， 用 addLoadEvent 函数 调用 preparePlaceholder 和 prepareGallery 国 数 。 


addLoadEvent(preparePlaceholder); 
addLoadEvent(prepareGallery); 


下 面 是 最 终 完 成 的 showPic.js 文件 : 


function addLoadEvent(func) { 
var oldonload = window.onload; 
if (typeof window.onload != 'function') { 
window.onload = func; 
} else { 
window.onload = function() { 
oldonload(); 
func(); 


DOO DO 0o 


} 
} 


function insertAfter(newElement,targetElement) { 
var parent = targetElement.parentNode; 
if (parent.1lastChild == targetElement) { 
parent.appendChild(newElement); 


} else { 
parent.insertBefore(newElement, targetElement.nextSibling); 


} 


function prepareplaceholder() { 
if (!document.createElement) return false; 
if (!document.createTextNode) return false; 
if (!document.getElementById) return false; 
if (!document.getElementById("imagegallery")) return false; 
var placeholder = document.createElement("img"); 
placeholder. setAttribute("id","placeholder"); 
placeholder. setAttribute("src", images/placeholder.gif"); 
placeholder. setAttribute("alt”", "my image gallery"); 
var description = document.createElement("p"); 
description.setAttribute("id","description"); 
var desctext = document. createTextNode( "Choose an image"); 
description.appendChild(desctext); 
var gallery = document.getElementById("imagegallery"); 
insertAfter(placeholder,gallery); 
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insertAfter(description,placeholder); 


function prepareGallery() { 
if (!document.getElementsByTagName) return false; 
if (!document.getElementById) return false; 
if (!document.getElementById("imagegallery")) return false; 
var gallery = document.getElementById("imagegallery"); 
var links = gallery.getElementsByTagName("a"); 
for ( var i=0; i < links.length; i++) { 
links[i].onclick = function() { 
return showPic(this); 


links[i].onkeypress = links[i].onclick; 
} 
} 


function showPic(whichpic) { 
if (!document.getElementById("placeholder")) return true; 
var source = whichpic.getAttribute("href"); 
var placeholder = document.getElementById("placeholder"); 
placeholder.setAttribute("src",source); 
if (!document.getElementById("description")) return false; 
if (whichpic.getAttribute("title")) { 
var text = whichpic.getAttribute("title"); 
} else { 
var text = ""; 
} 
var description = document.getElementById("description"); 
if (description.firstChild.nodeType == 3) { 
description.firstChild.nodeValue = text; 


return false; 
} 


addLoadEvent(prepareplaceholder); 
addLoadEvent(prepareGallery); 


JavaScript 代码 增加 了 , 但 标记 相应 的 减少 了 。 gallery.html 文件 现在 只 包含 一 个 由 JavaScript 


脚本 和 CSS 样式 表 共 用 的 “挂钩 。 这 个 “挂钩 ”就 是 图 片 清 单 的 id 属性 。 


<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8” /> 
<title>Image Gallery</title> 
<link rel="stylesheet" href="styles/layout.css" media="screen" /> 
</head> 
<body> 
<h1>Snapshots</h1> 
<ul id="imagegallery"> 
<1i> 
<a href="images/fireworks.jpg" title="A fireworks display"> 
<img src="images/thumbnail fireworks.jpg" alt="Fireworks" /> 
</a> 
</1i> 
<1i> 
«a href="images/coffee.jpg” title="A cup of black coffee”> 
<img src="images/thumbnail coffee.jpg” alt="Coffee” /> 
</a> 
</1i> 
<1i> 
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«a href="images/rose.jpg" title="A red, red rose"> 
<img src="images/thumbnail rose.jpg" alt="Rose” /> 
</a> 
</1i> 
<1i> 
<a href="images/bigben.jpg" title="The famous clock"> 
<img src="images/thumbnail bigben.jpg” alt="Big Ben” /> 
</a> 
</1i> 
</ul> 
«<script src="scripts/showPic.js"></script> 
</body> 
</html> 


现在 ,图 片 库 的 结构 、 样 式 和 行为 已 经 彻底 分 离 了 。 

把 gallery.html 文件 加 载 到 Web 浏览 器 里 。 如 图 7-10 所 示 ， 你 将 看 到 placeholder 图 片 和 
description 文本 段 ， 它 们 已 被 插入 到 imagegallery 清单 后 面 。 

我 们 用 JavaScript 动态 地 创建 了 标记 并 把 它们 添加 到 了 文档 里 。 JavaScript 还 对 图 片 清单 里 的 
所 有 链接 进行 了 预 处 理 。 你 可 以 点 击 任何 一 个 缩 略 图 去 体验 一 下 这 个 图 片 库 ， 如 图 7-11 所 示 。 


Snapshots Snapshots 
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到 目前 为 止 , 我 们 创建 的 这 些 新 内 容 对 这 个 页 面 来 说 并 不 算是 新 的 。 比 如 ， 页 面 加载 后 ， 标 
记 中 就 已 经 存在 title 属性 了 。 而 通过 createElement 添加 的 新 段落 也 是 基于 嵌入 在 脚本 中 的 标记 
添加 的 。 实 际 上 , 我 们 创建 的 所 有 一 切 都 包含 在 了 初始 的 页 面 当 中 。 只 不 过 我 们 通过 脚本 对 它们 
进行 了 一 番 重 排 而 已 。 怎么 才能 真正 得 到 原来 并 不 存在 于 初始 页 面 中 的 内 容 呢 ? 下 面 我 们 就 给 
一 种 解决 方案 。 


7.4 Ajax 


2005 年 ，Adaptive Path 公司 的 Jesse James Garrett 发 明了 Ajax 这 个 词 ， 用 于 概括 异步 加 载 页 
面 内 容 的 技术 。 以 前 ，Web 应 用 都 要 涉及 大 量 的 页 面 刷 新 : 用 户 点 击 了 某 个 链接 ， 请 求 发 送 回 服 
务 器 ,然后 服务 器 根据 用 户 的 操作 再 返回 新 页 面 。 即 便 用 户 看 到 的 只 是 页 面 中 的 一 小 部 分 有 变化 ， 
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也 要 刷新 和 重新 加 载 整个 页 面 ， 包 括 公 司 标志 、 导 航 、 头 部 区 域 、 脚 部 区 域 等 。 

使 用 Ajax 就 可 以 做 到 只 更 新 页 面 中 的 一 小 部 分 。 其 他 内 容 一 一 标志 、 导 航 、 头 部 、 脚 部 ， 
都 不 用 重新 加 载 。 用 户 仍然 像 往常 一 样 点 击 链 接 , 但 这 一 次 , 已 经 加 载 的 页 面 中 只 有 一 小 部 分 区 
域 会 更 新 ， 而 不 必 再 次 加 载 整个 页 面 了 。 

Ajax 的 主要 优势 就 是 对 页 面 的 请 求 以 异步 方式 发 送 到 服务 器 。 而 服务 器 不 会 用 整个 页 面 来 响 
应 请 求 ， 它 会 在 后 台 处 理 请 求 ， 与 此 同时 用 户 还 能 继续 浏览 页 面 并 与 页 面 交 互 。 你 的 脚本 则 可 以 
按 需 加 载 和 创建 页 面 内 容 ， 而 不 会 打 断 用 户 的 浏览 体验 。 利 用 Ajax，Web 应 用 可 以 呈现 出 功能 
丰富 、 交 互 敏捷 、 类 似 桌 面 应 用 般 的 体验 ， 就 像 你 使 用 谷歌 地 图 时 的 感觉 一 样 。 

和 任何 新 技术 一 样 ，Ajax 有 它 自 己 的 适用 范围 。 它 依赖 JavaScript， 所 以 可 能 会 有 浏览 器 不 
支持 它 ， 而 搜索 引擎 的 蜘蛛 程序 也 不 会 抓 取 到 有 关内 容 。 


7.4.1 XMLHttpRequest 对 象 


Ajax 技术 的 核心 就 是 XMLHttpRequest 对 象 。 这 个 对 象 充当 着 浏览 器 中 的 脚本 (客户 端 ) 与 服 
务 器 之 间 的 中 间 人 的 角色 。 以 往 的 请 求 都 由 浏览 器 发 出 ， 而 JavaScript 通 过 这 个 对 象 可 以 自己 发 
送 请 求 ， 同 时 也 自己 处 理 响应 。 

虽然 有 关 XMLHttpRequest 对 象 的 标准 还 比较 新 (参见 HTML5), 但 这 个 对 象 的 历史 可 谓 久 远 ， 
因而 得 到 了 几乎 所 有 现代 浏览 器 的 支持 。 但 问题 是 ， 不 同 浏 览 器 实现 XMLHttpRequest 对 象 的 方式 
不 太一 样 。 为 了 保证 跨 浏 览 器 ， 你 不 得 不 为 同样 的 事情 写 不 同 的 代码 分 支 。 

下 面 我 们 举 一 个 例子 ， 把 以 下 代码 保存 为 ajax.html: 


<!DOCTYPE html> 

<html] lang="en"> 

<head> 

<meta charset="utf-8” /> 
<title>Ajax</title> 


</head> 
<body> 


<div id="new"></div> 


«<script src="scripts/addLoadEvent.js"></script> 
<script src="scripts/getHTTPObject.js"></script> 
<script src="scripts/getNewContent.js"></script> 
</body> 
</html> 


这 个 HTML 文件 包含 的 addLoadEvent .js 文件 位 于 scripts 文件 夹 中 , 该 文件 夹 里 还 有 另外 两 
个 新 脚本 : getHTTPObject .js 和 getNewContent .jS。 

为 了 模拟 服务 器 的 响应 , 在 ajax.html 文件 的 旁边 创建 一 个 example.txt 文件 , 包含 如 下 内 容 : 

This was loaded asynchronously! 

这 个 文件 将 充当 服务 器 端 脚本 的 输出 。 多 数 情况 下 ， 服 务 器 端 脚本 在 接 到 请 求 后 ， 还 会 做 一 
番 处 理 再 输出 结果 。 但 这 里 我 们 只 是 为 了 演示 说 明 ， 就 不 搞 那 么 复杂 了 。 接 下 来 我 们 就 编写 
getHTTPObject .js 和 getNewContent .js 这 两 个 脚本 。 

微软 最 早 在 正 5 中 以 ActiveX 对 象 的 形式 实现 了 一 个 名 叫 XMLHTTP 的 对 象 。 在 了 正中 创建 新 的 
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对 象 要 使 用 下 列 代码 : 
var request = new ActiveXObject("Msxml2.XMLHTTP.3.0"); 

其 他 浏览 器 则 基于 XMLHttpRequest 来 创建 新 对 象 : 

var request = new XMLHttpRequest(); 


更 麻烦 的 是 ,不同 正 版 本 中 使 用 的 XMLHTTP 对 象 也 不 完全 相同 。 为 了 兼容 所 有 六 览 器 ， 
getHTTPObject .js 文件 中 的 getHTTPObject 函数 要 这 样 来 写 : 


function getHTTPObject() { 
if (typeof XMLHttpRequest == "undefined") 
XMLHttpRequest = function () { 

try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); } 
catch (e) {} 

try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); } 
catch (e) {} 

try { return new ActiveXObject("Msxml2.XMLHTTP"); } 
catch (e) {} 

return false; 


return new XMLHttpRequest(); 


getHTTPObject 通过 对 象 检 测 技 术 检 测 了 XMLHttpRequest。 如 果 失 败 ， 则 继续 检测 其 他 方法 ， 
最 终 返 回 false 或 一 个 新 的 XMLHttpRequest (或 XMLHTTP) 对 象 。 
这 样 , 在 你 的 脚本 中 要 使 用 XMLHttpRequest 对 象 时 , 可 以 将 这 个 新 对 象 直接 赋值 给 一 个 变量 : 


var request = getHTTPObject(); 


XMLHttpRequest 对 象 有 许多 的 方法 。 其 中 最 有 用 的 是 open 方法 ， 它 用 来 指定 服务 器 上 将 要 访 
问 的 文件 ， 指 定 请 求 类 型 GET、POST 或 SEND。 这 个 方法 的 第 三 个 参数 用 于 指定 请 求 是 否 以 异步 
方式 发 送 和 处 理 。 
在 getNewContent .js 文件 中 添加 下 列 代码 : 


function getNewContent() { 
var request = getHTTPObject(); 
if (request) { 
request.open( "GET”", "example.txt", true ); 
request.onreadystatechange = function() { 
if (request.readyState == 4) { 
var para = document.createElement("p"); 
Var txt = document.createTextNode(request.responseText); 
para.appendChild(txt); 
人 


request,send(nul1); 


} else { 
alert('Sorry, your browser doesn\'t support XMLHttpRequest" ); 


} 
addLoadEvent (getNewContent); 


当 页 面 加 载 完成 后 ， 以 上 代码 会 发 起 一 个 GET 请 求 ， 请 求 与 ajax.html 文件 位 于 同一 目录 的 
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example.txt 文件 。 
request.open( "GET", "example.txt", true ); 
代码 中 的 onreadystatechange 是 一 个 事件 处 理 函 数 ， 它 会 在 服务 器 给 XMLHttpRequest 对 象 送 
回响 应 的 时 候 被 触发 执行 。 在 这 个 处 理 函 数 中 ， 可 以 根据 服务 器 的 具体 响应 做 相应 的 处 理 。 
在 此 ， 我 们 给 它 指定 了 一 个 处 理 函数 : 
request.onreadystatechange = function() { 


// 处 理 响 应 


当然 ， 也 可 以 引用 一 个 函数 。 下 面 的 代码 就 会 在 onreadystatechange 被 触发 时 执行 名 为 
doSomething 的 函数 : 


注意 在 为 onreadystatechange 指定 函数 引用 时 ， 不 要 在 函数 名 后 面 加 括号 。 因 为 加 揪 号 表示 立 
即 调 用 函数 ， 而 我 们 在 此 只 想 把 函数 自身 的 引用 (而 不 是 函数 结果 ) 赋值 给 
onreadystate-change 属性 。 


request .onreadystatechange = doSomething; 

在 指定 了 请 求 的 目标 ， 也 明确 了 如 何 处 理 响 应 之 后 ， 就 可 以 用 send 方 法 来 发 送 请 求 了 : 

request.send(null); 

如 果 浏 览 器 不 支持 XMLHttpRequest 对 象 ，getHTTPObject 函数 会 返回 false， 因 此 你 还 要 处 理 
好 这 种 情况 。 
服务 器 在 向 XMLHttpRequest 对 象 发 回响 应 时 ， 该 对 象 有 许多 属性 可 用 ， 浏 览 器 会 在 不 同 阶段 
更 新 readystate 属性 的 值 ， 它 有 5 个 可 能 的 值 : 
D 0 表示 未 初始 化 
D 1 表示 正在 加 载 
口 
口 


2 表示 加 载 完毕 
3 表示 正在 交互 
D 4 表示 完成 

只 要 readyState 属性 的 值 变 成 了 4， 就 可 以 访问 服务 器 发 送 回来 的 数据 了 。 

访问 服务 器 发 送 回来 的 数据 要 通过 两 个 属性 完成 。 一 个 是 responseText 属性 ， 这 个 属性 用 于 
保存 文本 字符 串 形 式 的 数据 。 另 一 个 属性 是 responsexML 属性 ， 用 于 保存 Content-Type 头 部 中 指 
定 为 "text/xm1" 的 数据 ， 其 实 是 一 个 DocumentFragment 对 象 。 你 可 使 用 各 种 DOM 方法 来 处 理 这 个 
对 象 。 而 这 也 正 是 XMLHttpRequest 这 个 名 称 里 有 XML 的 原因 。 

在 这 个 例子 中 ，onreadystatechange 事件 处 理 函 数 在 等 到 readyState 值 变 成 4 之 后 ， 就 会 从 
responseText 属性 里 取得 文本 数据 ， 然 后 把 数据 放 到 一 个 段落 中 ， 再 将 新 段落 添加 到 DOM 里 : 


Tequest .onreadystatechange = function() { 
if (request.readyState == 4) { 
Var para = document.createElement("p"); 
var txt = document.createTextNode(request.responseText); 
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para.appendChild(txt); | | 
document getElementById('new' ).appendChild(para); 


} 
} 
此 时 ，example.txt 文件 中 的 文本 内 容 就 会 出 现在 id 为 new 的 div 元 素 中 ， 如 图 7-12 所 示 。 


全 站 中 
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This was loaded asynchronously! 


注意 在 使 用 Ajax 时 ， 千 万 要 注意 同 源 策略 。 使 用 XMLHttpRequest 对 象 发 送 的 请 求 只 能 访问 与 
其 所 在 的 HTML 处 于 同一 个 域 中 的 数据 ， 不 能 向 其 他 域 发 送 请 求 。 此 外 ， 有 些 浏览 器 还 
会 限制 Ajax 请 求 使 用 的 协议 。 比 如 在 Chrome 中 ， 如 果 你 使 用 file:// 协 议 从 自己 的 硬盘 里 
加 载 example.txt 文件 ， 就 会 看 到 “Cross origin requests are only supported for HTTP”( 跨 
域 请 求 只 支持 HTTP 协议 ) 的 错误 消息 。 


异步 请 求 有 一 个 容易 被 忽略 的 问题 是 异步 性 ， 就 是 脚本 在 发 送 XMLHttpRequest 请 求 之 后 ， 仍 
然 会 继续 执行 ,不 会 等 待 响应 返回 。 为 了 证 明 这 一 点 ， 可 以 在 request.onreadystatechange 处 理 函 
数 中 和 getNewContent 函数 的 最 后 各 添加 一 个 警告 框 : 


function getNewContent() { 
var request = getHTTPObject(); 
if (request) { 
request.open( "GET", “example.txt", true ); 
request.onreadystatechange = function() { 
if (request.readyState == { 
alert("Response Received"); 
Var para = document.createElement("p"); 
var txt = document.createTextNode(request.responseText); 
para.appendChild(txt); 
document.getElementById('new' ).appendChild(para); 
} 
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3 
request.send(null); 
} else { 
alert('Sorry, your browser doesn\'t support XMLHttpRequest'); 


alert("Function Done"); 

addLoadEvent (getNewContent); 

现在 加 载 一 下 页 面试 试 , 很 可 能 显示 “Function Done” 的 警告 框 会 先 于 “ResponseReceived” 
的 警告 框 出 现 。 这 就 证 明了 脚本 不 会 等 待 send 的 响应 ， 而 是 会 继续 执行 。 之 所 以 说 “很 可 能 ”， 
是 因为 有 时 候 服务 器 的 响应 也 会 非常 快 。 如 果 你 是 从 本 地 硬盘 上 加 载 文 件 ， 请 求 和 响应 几乎 会 同 
时 发 生 。 而 如 果 是 从 手机 浏览 器 中 加 载 页 面 ， 那 么 在 收 到 响应 之 前 铠 怕 就 要 等 很 长 时 间 。 

为 此 ， 如 果 其 他 脚本 依赖 于 服务 器 的 响应 ， 那 么 就 得 把 相应 的 代码 都 转移 到 指定 给 
onreadystatechange 属性 的 那个 函数 中 。 上 面 例子 中 添加 DOM 元 素 的 代码 就 是 一 个 例子 。 

XMLHttpRequest 对 象 实际 上 是 非常 简单 的 ， 也 没有 什么 值得 大 书 特 书 的 地 方 。 不 过 ， 只 要 发 
挥 一 点 想象 力 ， 你 就 可 以 通过 它 达成 令 人 炫目 的 效果 。 


Ajax 之 挑战 

总 的 来 说 ，Ajax 技术 还 是 给 我 们 带 了 很 多 好 处 。 利 用 它 ， 可 以 增强 站 点 的 可 用 性 ， 用 户 
无 须 刷新 页 面 ， 从 而 可 以 很 快 地 得 到 响应 。 但 与 此 同时 ， 这 个 新 技术 也 给 我 们 提出 了 一 些 挑 
战 。 

Ajax 应 用 的 一 个 特色 就 是 减少 重复 加 载 页 面 的 次 数 。 但 这 种 缺少 状态 记录 的 技术 会 与 浏 
览 器 的 一 些 使 用 惯例 产生 冲突 ， 时 致 用 户 无 法 使 用 后 退 按钮 或 者 无 法 为 特定 状态 下 的 页 面 添 
加 书签 。 

只 更 新 部 分 页 面 区 域 的 特性 也 会 影响 到 用 户 的 预期 。 理 想 情 况 ， 用 户 的 每 一 次 操作 都 应 
该 得 到 一 个 清晰 明确 的 结果 。 为 此 ，Web 设计 人 员 必 须 在 向 服务 器 发 出 请 求 和 服务 器 返回 响 
应 时 ,给 用 户 明 确 的 提示 。 

要 构建 成 功 的 Ajax 应 用 ,关键 在 于 将 Ajax 功能 看 做 一 般 的 JavaScript 增 强 功能 , 在 平稳 
退化 的 基础 上 求 得 渐进 增强 。 


7.4.2 ”渐进 增强 与 Ajax 


由 于 Ajax 应 用 能 够 让 用 户 感觉 到 响应 迅速 而 透明 ， 很 多 人 都 认为 它 更 像 传统 的 桌面 应 用 ， 
而 不 是 网 站 。 虽 然 这 种 说 法 在 某 种 意义 上 是 正确 的 , 但 却 很 容易 误导 人 , 很 容易 让 人 觉得 可 以 毫 
无 顾忌 地 使 用 Ajax， 而 不 必 像 在 创建 网 站 那样 考虑 可 用 性 和 可 访问 性 。 

很 多 站 点 使 用 了 Ajax 技术 并 明确 要 求 必须 启用 JavaScript 才能 正常 访问 网 站 的 内 容 。 有 一 种 
观点 为 此 辩护 ， 今 天 站 点 提供 的 功能 是 如 此 丰富 ， 根 本 不 可 能 做 到 平稳 退化 。 

我 不 赞同 这 种 观点 。 实 际 上 ， 我 认为 能 够 通过 Ajax 实现 的 应 用 一 定 也 可 以 通过 其 他 非 Ajax 
技术 来 实现 。 归 根 结 底 ， 要 看 你 怎么 用 Ajax。 
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如 果 你 从 一 开始 设计 就 以 Ajax 为 起 点 ， 那 么 以 后 确实 很 难 把 它 从 成 品 站 点 中 剥离 出 来 ， 再 
额外 提供 一 个 不 使 用 Ajax 的 版 本 。 但 是 ， 如 果 一 开始 你 的 应 用 就 是 基于 老式 的 页 面 刷新 机 制 构 
建 的 ， 那 么 就 可 以 在 既 有 框架 基础 上 ， 用 Ajax 拦住 发 送 到 服务 器 的 请 求 ， 并 将 请 求 转交 给 
XMLHttpRequest 对 象 处 理 。 这 种 情况 下 ，Ajax 功能 就 扮演 了 一 个 位 于 常规 站 点 之 上 的 层 。 

这 种 说 法 听 起 来 有 点 耳 熟 , 是 吗 ? 这 跟 我 们 第 5 章 讨论 的 渐进 增强 理念 没有 什么 区 别 。 从 一 
开始 就 依赖 Ajax 构建 核心 应 用 , 无 异 于 从 一 开始 就 使 用 javascript: 伪 协议 去 处 理 点 击 链接 的 操作 
(同样 也 在 第 5 章 讨论 过 )。 对 于 后 者 , 更 好 的 方式 当然 是 只 使 用 常规 的 链接 , 然后 通过 JavaScript 
去 拦截 默认 动作 。 同 样 的 道理 ， 构 建 Ajax 网 站 的 最 好 方法 ， 也 是 先 构建 一 个 常规 的 网 站 ， 然 后 
Hijax 它 。 


7.4.3 Hijax 


如 果 说 Ajax 的 成 功 要 归功 于 它 的 这 个 简短 好 记 的 名 字 ， 让 人 提 到 它 的 时 候 不 用 再 说 
“XMLHttpRequest 和 DOM 脚本 编程 、CSS, 以 及 (X)HTML”, 而 只 要 说 “Ajax” 就 可 以 了 。 那么 ， 
你 只 要 说 “Hijax””， 别 人 也 就 明白 它 指 的 是 “渐进 增强 地 使 用 Ajax”。 

Ajax 应 用 主要 依赖 后 台 服 务 器 ， 实 际 上 是 服务 器 端的 脚本 语言 完成 了 绝 大 部 分 工作 。 
XMLHttpRequest 对 象 作 为 浏览 器 与 服务 器 之 间 的 “中 间 人 ”， 它 只 是 负责 传递 请 求 和 响应 。 如 果 
把 这 个 中 间 人 请 开 ， 浏览 器 与 服务 器 之 间 的 请 求 和 响应 应 该 继续 完成 (而 不 是 中 断 )， 只 不 过 花 
的 时 间 可 能 会 长 一 点 点 。 

想 一 想 登 录 表 单 , 构建 它 最 简单 的 办 法 就 是 按照 老 传 统 , 让 表单 把 整个 页 面 都 提交 到 服务 器 ， 
然后 服务 器 再 发 回来 一 个 包含 反馈 的 新 页 面 。 所 有 处 理 操 作 都 在 服务 器 上 完成 , 而 用 户 在 表单 中 
输入 的 数据 则 由 服务 器 负责 取得 并 与 保存 在 数据 库 里 的 数据 进行 比较 , 看 是 不 是 真 的 存在 这 么 个 
用 户 。 

然后 ， 为 了 给 这 个 登录 表单 添加 Ajax 功能 ， 就 需要 拦截 提交 表单 的 请 求 (Hijax 嘛 )， 让 
XMLHttpRequest 请 求 来 代为 发 送 。 提 交 表 单 触 发 的 是 submit 事件 ， 因 此 只 要 通过 onsubmit 事件 处 
理 函 数 捕获 该 事件 ， 就 可 以 取消 它 的 默认 操作 (提交 整个 页 面 )， 然 后 代 之 以 一 个 新 的 操作 通 
过 XMLHttpRequest 对 象 向 服务 器 发 送 数据 。 

拦截 了 登录 表单 的 提交 请 求 之 后 ， 登 录 过 程 就 可 以 让 用 户 感 觉 更 方便 。 响 应 时 间 加 快 了 , 不 
必 刷 新 整个 页 面 了 。 可 是 ， 万 一 用 户 的 浏览 器 没有 启动 JavaScript 呢 ?” 没 关系， 登录 表单 照样 能 
让 用 户 正常 登录 。 只 不 过 所 花 时 间 要 长 一 点 ， 用 户 体验 没有 那么 流畅 罢了 。 毕 竞 ， 处 理 登 录 验 证 
的 操作 都 在 服务 器 上 啊 ， 有 什么 理由 让 没有 JavaScript 的 用 户 不 能 登录 呢 ! 

请 大 家 记 住 这 个 事实 ，Ajax 应 用 主要 依赖 于 服务 器 端 处 理 ， 而 非 客户 端 处 理 。 既 然 如 此 ， 它 
就 没有 理由 不 能 做 到 平稳 退化 。 不 可 否认 ， 有 些 应 用 如 果 没 有 了 Ajax 而 只 依靠 页 面 刷新 ,用 户 的 
每 一 次 操作 可 能 都 要 等 很 长 时 间 。 但 慢 一 点 的 退化 的 体验 ,是 不 是 仍然 要 比 完全 没有 体验 更 好 呢 ? 

第 12 章 在 构建 一 个 完整 的 网 站 示例 时 ， 将 详细 介绍 如 何 利 用 Hijax 技术 。 


Q@ Jeremy Keith 借用 了 hijack (支持 ) 一 词 的 发 音 和 含义 ， 意 思 就 是 拦截 用 户 操作 触发 的 请 求 。 一 一 译 者 注 
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7.5 小结 


在 本 章 里 ,我 们 介绍 了 几 种 不 同 的 向 浏览 器 里 的 文档 动态 添加 标记 的 办 法 。 我 们 还 简要 地 回 
顾 了 两 种 “传统 的 ”技术 : 
口 document .write 方法 
D innerHTML 属性 
之 后 你 看 到 了 一 些 有 一 定 深度 的 利用 DOM 方法 来 动态 创建 标记 的 例子 。 
口 createElement 方法 
口 createTextNode 方法 
口 appendChild 方 法 
口 insertBefore 方 法 
使 用 这 些 方法 的 关键 是 将 Web 文 档 视 为 节点 树 。 请 记 住 ,你 用 createElement 或 createTextNode 
方法 刚刚 创建 出 来 的 节点 只 是 JavaScript 世界 里 的 孤儿 。 利 用 appendCnil1d 或 insertBefore 方 法 ， 
可 以 把 这 些 DocumentFragment 对 象 插入 某 个 文档 的 节点 树 ， 让 它们 呈现 在 浏览 器 窗口 里 。 
在 这 一 章 里 ， 你 还 看 到 了 如 何 对 图 片 库 做 进一步 改进 。 你 还 看 到 了 一 个 非常 实用 的 
insertAfter 函数 的 构建 过 程 。 在 需要 把 一 些 标记 添加 到 文档 时 ， 这 个 函数 往往 能 帮 上 大 忙 。 
本 章 还 简要 讨论 了 Ajax 和 异步 请 求 ， 这 些 内 容 将 在 第 12 章 更 详细 地 介绍 。 
在 下 一 章 里 , 你 将 会 看 到 更 多 癌 文 档 添加 标记 的 例子 , 学 会 动态 创建 一 些 很 有 用 的 信息 块 来 
增强 你 的 文档 。 


第 8 章 


充实 文档 的 内 容 


本 章 内 容 

D 一 个 为 文档 创建 “ 缩 略 语 列表 ”的 函数 
D 一 个 为 文档 创建 “文献 来 源 链接 ”的 函数 
一 个 为 文档 创建 “快捷 键 清单 ”的 函数 


上 一 章 你 已 经 学 会 利用 DOM 方法 和 属性 来 动态 创建 标记 。 在 这 一 章 里 你 将 继续 在 实践 中 应 
用 这 些 技术 。 你 会 通过 DOM 创建 一 些 标 记 片 段 并 随后 把 它们 添加 到 网 页 。 从 friends of ED 网 站 
(http://friendsofed.com/) 本 书 的 下 载 页面 你 可 以 找到 这 些 函 数 的 完整 版 本 。 


8.1 不 应 该 做 什么 


理论 上 ， 你 可 以 用 JavaScript 把 一 些 重要 的 内 容 添 加 到 网 页 上 。 事 实 上 这 是 一 个 坏 主 意 ， 
为 这 样 一 来 JavaScript 就 没有 任何 空间 去 平稳 退化 。 那 些 缺 乏 必 要 的 JavaScript 支持 的 访问 者 就 
会 永远 也 看 不 到 你 的 重要 内 容 。 至 少 到 现在 为 止 ， 各 大 搜索 引擎 网 站 的 搜索 机 器 人 (searchbot) 
还 几乎 不 支持 JavaScript。 
如 果 你 觉察 到 自己 正在 使 用 DOM 技术 把 一 些 重要 的 内 容 添 加 到 网 页 上 ， 则 应 该 立刻 停 下 来 
去 检讨 你 的 计划 和 思路 。 你 很 可 能 会 发 现 自己 正在 滥用 DOMI 
第 5 章 我 们 讨论 过 ， 下 面 这 两 项 原则 要 牢记 在 心 。 
口 渐进 增强 (progressive enhancement) 。 渐 进 增强 原则 基于 这 样 一 种 思想 : 你 应 该 总 是 从 最 
核心 的 部 分 ， 也 就 是 从 内 容 开 始 。 应 该 根据 内 容 使 用 标记 实现 良好 的 结构 ， 然 后 再 逐步 
加 强 这 些 内 容 。 这 些 增强 工作 既 可 以 是 通过 CSS 改进 呈现 效果 ， 也 可 以 是 通过 DOM 添 
加 各 种 行为 。 如 果 你 正在 使 用 DOM 添加 核心 内 容 ， 那么 你 添加 的 时 机 未 免 太 迟 了 ， 内 容 
应 该 在 刚 开始 编写 文档 时 就 成 为 文档 的 组 成 部 分 。 
口 平稳 退化 。 渐 进 增强 的 实现 必然 支持 平稳 退化 。 如 果 你 按照 渐进 增强 的 原则 去 充实 内 容 ， 
你 为 内 容 添 加 的 样式 和 行为 就 自然 支持 平稳 退化 ， 那 些 缺乏 必要 的 CSS 和 DOM 支持 的 
访问 者 仍 可 以 访问 到 你 的 核心 内 容 。 如 果 你 用 JavaScript 去 添加 这 些 重要 内 容 ， 它 就 没 法 
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支持 平稳 退化 ， 不 支持 JavaScript， 就 看 不 到 内 容 。 这 好 像 是 一 种 限制 ， 其 实 不 是 ， 利 用 
DOM 去 生成 内 容 有 着 广泛 的 用 途 。 


8.2 把 “不 可 见 ” 变 成 “可 见 ” 


现 如 今 的 Web 设计 人 员 能 够 从 许多 方面 对 网 页 的 显示 效果 加 以 控制 。 在 对 包含 在 HTML 标 
记 内 的 内 容 设置 样式 时 ，CSS 提供 了 非常 强大 的 功能 。 这 种 技术 早已 超越 了 对 网 页 内 容 的 字体 和 
颜色 进行 简单 调整 的 初级 阶段 。 利 用 CSS, 我 们 可 以 把 原本 纵向 排列 的 元 素 显示 成 一 行 。 第 6 童 
JavaScript 图 片 库 页 面 上 由 缩 略 图 构成 的 图 片 清单 就 是 一 个 很 好 的 例子 .包含 在 <1i> 标 签 里 的 列表 
项 在 通常 情况 下 各 占 一 行 ， 但 在 我 把 每 个 列表 项 的 display 属性 设置 为 inline 之后， 那些 列表 项 
在 浏览 器 窗口 里 从 纵向 排列 变 成 了 横向 排列 。 

反 过 来 也 是 可 以 的 。 对 于 通常 是 横向 排列 的 元 素 ， 只 需 把 它 的 display 属性 设置 为 Dlock, 就 
可 以 让 这 个 元 素 独 占 一 行 。 如 果 把 某 个 元 素 的 display 属性 设置 为 none， 甚 至 可 以 让 它 根本 不 出 
现在 浏览 器 窗口 里 ， 这 个 元 素 仍 是 DOM 节点 树 的 组 成 部 分 ， 只 是 浏览 器 不 显示 它们 而 已 。 

除了 标签 之 间 的 内 容 以 外 ,标签 内 的 属性 中 也 包含 语义 信息 。 在 对 内 容 进行 标记 时 ， 正 确 地 
设置 标记 属性 也 是 工作 的 重要 组 成 部 分 。 

绝 大 多 数 属性 的 内 容 ( 即 属 性 值 ) 在 Web 浏览 器 里 都 是 不 显示 的 ， 只 有 极 少数 属性 例外 ， 
但 不 同 的 浏览 器 在 呈现 这 些 例外 的 属性 时 却 常常 千姿百态 。 比 如 说 ， 有 些 浏 览 器 会 把 title 属性 
的 内 容 显 示 为 弹出 式 的 提示 框 ， 另 一 些 浏 览 器 则 会 把 它们 显示 在 状态 栏 里 。 有 些 浏 览 器 会 把 alt 
属性 的 内 容 显示 为 弹出 式 的 提示 框 ， 这 导致 了 对 alt 属性 的 广泛 滥用 。 这 个 属性 原本 的 用 途 是 : 
在 图 片 不 可 用 (无 法 显示 ) 时 用 一 段 描述 文字 来 解释 这 个 位 置 的 图 片 。 

在 显示 属性 这 个 问题 上 ， 你 只 能 听任 浏览 器 摆布 。 其 实 只 需要 一 点 点 DOM 编程 ， 我 们 就 能 
够 把 这 种 控制 权重 新 掌握 在 自己 的 手 里 。 
本 章 我 们 着 眼 于 使 用 DOM 技术 为 网 页 添加 一 些 实用 的 小 部 件 。 
D 得 到 隐藏 在 属性 里 的 信息 。 
D 创建 标记 封装 这 些 信息 。 
D 把 这 些 标记 插入 到 文档 。 

这 与 简单 地 利用 DOM 去 新 建 一 些 内 容 有 所 区 别 。 在 本 章 的 例子 里 ， 这 些 内 容 已 经 存在 于 标 

记 之 中 ， 你 要 利用 JavaScript 和 DOM 复制 这 些 内 容 并 以 另外 一 种 结构 呈现 它们 。 


8.3 内 容 
和 往常 一 样 ， 任 何 网 页 都 以 内 容 为 出 发 点 。 现 在 拿 下 面 这 段 文 字 作为 你 的 出 发 点 : 


What is the Document Object Model? 

The W3C defines the DOM as: 

A platform- and language-neutral interface that will allow programs 
and scripts to dynamically access and update the 

content, structure and style of documents. 

It is an API that can be used to navigate HIML and XML documents. 
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给 这 段 文 字 加 上 适当 的 标记 : 
<hi>What is the Document Object Model?</h1> 


<p> 
The <abbr title="World Wide Web Consortium">W3C</abbr> defines 
wthe <abbr title="Document Object Model">DOM</abbr> as: 
</p> 
<blockquote cite="http://www.w3.0rg/DOM/"> 

<p> 
A platform- and language-neutral interface that will allow programs 
wand scripts to dynamically access and update the 
wcontent, structure and style of documents , 

</p> 
</blockquote> 
<p> 
It is an «abbr title="Application Programming Interface">API</abbr> 
wthat can be used to navigate <abbr title="HyperText Markup Language"> 
wHIML</abbr> and <abbr title="eXtensible Markup Language" >XML 
wx</abbr> documents. 
</p> 


这 段 文本 包含 大 量 的 缩 略语 ， 上 面 已 经 都 用 <abbr> 标 签 把 它们 都 标识 出 来 了 。 


注意 <abbr> 标 签 与 <acronym> 这 两 个 标签 之 间 的 区 别 一 直 纠 缠 不 清 。<abbr> 标 签 的 含义 是 “ 缩 略 
语 ”( 源 自 英 文 单 词 abbreviation) ， 它 是 对 单词 或 短语 的 简写 形式 的 统称 。<acronym> 标 签 
的 含义 是 被 当成 一 个 单词 来 读 的 “ 首 字 母 缩写 词 ”( 源 自 英文 单词 acronym) 。 如 果 你 把 
DOM 念 成 一 个 单词 dom， 它 就 是 一 个 首 字母 缩写 词 ; 如 果 你 把 它 念 成 三 个 字母 D-O-M， 
它 就 是 一 个 缩 略 语 。 所 有 的 首 字母 缩 略 词 都 是 缩 略 语 ， 但 不 是 所 有 的 缩 略语 都 是 首 字母 
缩 略 词 。 为 避免 混乱 持续 下 去 ， 在 HIML5 中 <acronym> 标 签 已 被 <abbr> 标 签 代替 。 


现在 已 经 把 那 段 文本 改写 成 一 个 标记 片段 ， 你 需要 把 它 扩展 为 一 个 完整 的 网 页 。 具 体 地 说 ， 
要 先 把 这 段 内 容 放 入 <body> 标 签 ， 再 把 这 个 body 元 素 以 及 相应 的 head 元 素 放 入 <html> 标 签 。 


8.3.1 选用 HTML、XHTML 还 是 HTML5 


对 于 标记 而 言 ， 选 用 HIML 还 是 XHTML 是 你 的 自由 。 重 要 的 是 不 管 选 用 的 哪 种 文档 类 型 ， 
你 使 用 的 标记 必须 与 你 选用 的 DOCTYPE 声明 保持 一 致 。 

就 个 人 而 言 ， 我 更 喜欢 使 用 XHTML 规则 ， 使 用 一 个 DOCTYPE 让 浏览 器 采用 更 严格 的 呈现 方 
案 。 它 对 允许 使 用 的 标记 有 着 更 严格 的 要 求 ， 而 这 可 以 督促 我 写 出 更 严谨 清晰 的 文档 。 比 如 说 ， 
在 写 标 签 和 属性 时 ，HTML 既 人 允许 使 用 大 写字 母 (比如 <P>)， 也 允许 使 用 小 写字 母 ( 比 如 <p>)， 
XHTML 却 要 求 所 有 的 标签 名 和 属性 名 都 必须 使 用 小 写字 母 。 

HTML 在 某 些 情况 下 会 允许 省 略 结束 标签 ， 比 如 说 ， 你 可 以 省 略 </p> 和 </1i> 标 签 。 表 面 上 看 
它 提供 了 一 种 弹性 , 但 事实 上 一 旦 文档 在 浏览 器 里 的 呈现 效果 与 你 的 预期 不 符 , 追查 问题 的 根源 
将 变 得 十 分 困难 。 在 XHTML 的 世界 里 , 所 有 的 标签 都 必须 闭合 一 一 对 诸如 <img> 和 <br> 之 类 的 孤 
立 元 素 也 不 例外 : 在 书写 时 它们 必须 有 一 个 反 斜 线 字符 表示 标签 结束 : 即 <img/> 和 <br/> 这 样 。 注 
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意 , 为 了 与 早期 的 浏览 器 保持 兼容 , 应 该 在 反 斜 杠 字 符 的 前 面 保留 一 个 空格 。 使 用 严格 的 DOCTYPE 
对 验证 工具 跟踪 错误 会 有 很 大 的 帮助 。 
若 要 使 用 XHTMEL DOCTYPE， 应 将 下 列 内 容 写 在 文档 开头 : 


<!DOCTYPE html 
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.0org/TR/xhtml1/DTD/xhtml1- strict.dtd"> 


另 一 个 方案 你 可 能 会 更 喜欢 ， 那 就 是 使 用 HTMLS5 的 文档 类 型 声明 ， 它 非常 简单 
<!DOCTYPE html> 


总 共 才 15 个 字符 。 简 短 好 记 ， 并 且 容 易 输 入 。 而 且 这 个 文档 声明 同样 也 支持 HTML 和 XHTML 标记 。 
要 详细 了 解 HIML5， 请 看 第 11 章 。 


注意 某 些 浏览 器 要 根据 DOCTYPE 来 决定 使 用 标准 模式 ,还 是 使 用 兼容 模式 来 呈现 页 面 。 兼 容 模 
式 意味 着 ee 览 器 要 模仿 某 些 早期 浏览 器 的 “怪异 行为 "， 并 容许 那些 不 规范 的 页 面 在 新 浏 
览 器 也 能 正常 工作 。 一 般 来 说 ， 我 们 都 应 该 坚持 使 用 标准 模式 ， 人 避免 触发 兼容 模式 。 谢 
天 谢 地 ，HTMLS5 DOCTYPE 默认 对 应 的 就 是 标准 模式 。 


XHTML5 


假如 真 想 较 真 ,可 以 走 XHTMLS 的 路 线 ,让 Web 服务 器 以 application/xhtml+xml 的 MIME 
类 型 来 响应 页 面 ， 但 必须 预先 警告 。 

XHTMLS 本 质 上 是 使 用 严格 的 XML 规则 编写 的 HTML5。 从 技术 角度 说 ，Web 浏览 器 应 
该 将 任何 XHTMLS 文档 都 视 为 XML 文档 , 而 不 是 HTML 文档 ,而 在 现实 中 ,你 还 得 在 文档 
的 头 部 发 送 正确 的 MIME 类 型 ， 即 application/xhtml+xml。 有 些 浏览 器 不 认识 这 个 MIME 类 
型 ， 因 而 一 般 要 在 服务 器 端 对 浏览 器 进行 探查 后 再 发 送 。 否 则 最 坏 的 情况 ,页 面 很 可 能 根本 
不 会 在 浏览 器 中 呈现 。 因 此 ， 绝 大 多 数 XHTML 页 面 仍 然 是 以 HTML 类 型 发 送 的 。 

如 果 使 用 了 XHTML5, 而 且 MIME 类 型 也 正确 , 那么 你 的 页 面 除 了 在 某 些 浏览 器 中 可 能 
无 法 呈现 之 外 ， 有 些 HIMLDOM 属性 ， 如 document .write 也 将 无 法 使 有 用。 当然， 核心 DOM 
方法 总 是 能 正常 使 用 的 。 不 仅 在 XHTML5 中 ， 在 任何 有 效 的 XML 文档 中 ,核心 DOM 方法 
都 畅行 无 阻 。 


下 面 是 按照 HTML5 规范 完成 的 最 终 标 记 文件 explanation.html: 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Explaining the Document Object Model</title> 
</head> 
<body> 
<hi>What is the Document Object Model?</h1> 


<p> 
The <xabbr title="World Wide Web Consortium">W3C</abbr> defines the <abbT title="Document 
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Object Model">DOM</abbr> as: 
</p> 
<blockquote cite="http://www.w3.org/DOM/"> 


<p> 
A platform- and language-neutral interface that will allow programs 
wand scripts to dynamically access and update the 


wcontent, structure and style of documents. 
</p> 
</blockquote> 
<p> 
It is an <abbr title="Application Programming Interface">API</abbr> 
wthat can be used to navigate <abbr title="HyperText Markup Language"> 
wHIML</abbr> and <abbr title="eXtensible Markup Language" >XML 
w</abbr> documents. 
</p> 
</body> 
</html> 


如 果 你 在 Web 浏览 器 里 加 载 这 个 页 面 ， 就 可 以 看 到 浏览 器 是 如 何 显示 那些 标记 内 容 的 ， 如 


图 8-1 所 示 。 有 些 浏 览 器 会 把 文档 中 的 缩 略 语 (<abbr> 标 签 ) 显示 为 带 有 下 划 线 或 下 划 点 的 文本 ， 
另 一 些 浏览 器 则 会 把 缩 略语 显示 为 斜体 字 。 


OO Explaining the Document Object Mode 


| A » 
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What is the Document Object Model? 


The W3C defines the DOM as: 


A platform- and language-neutral interface that will allow programs and scripts to 
dynamically access and update the content., structure and style of documents. 


Itis an API that can be used to navigate HTML and XML documents. 


8.3.2 CSS 


虽然 我 还 未 给 explanation.html 文档 配 上 任何 样式 表 ， 但 样式 显然 已 经 在 起 作用 了 。 这 是 因 


为 每 种 浏览 器 都 有 一 些 自己 的 默认 样式 。 


我 们 可 以 用 自己 的 样式 表 来 取代 浏览 器 的 默认 样式 。 请 看 下 面 这 个 例子 : 


body { 
font-family: "Helvetica","Arial",sans-serif; 
font-size: 10pt; 


} 
abbr { 
text-decoration: none; 
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border: 0; 
font-style: normal; 


把 这 个 样式 表 保存 为 typography.css 文件 ， 并 将 其 放 到 子 目 录 styles 里 去 。 

在 explanation.html 文档 的 <head> 部 分 增加 一 条 语句 : 

<link rel="stylesheet” media="screen" href="styles/typography.css" /> 

现在 你 把 explanation.html 文档 加 载 到 一 个 Web 浏览 器 里 ， 可 以 看 到 一 些 差别 。 这 份 文档 的 
字体 变 了 ， 其 中 的 缩 略 语 已 看 不 出 有 特别 之 处 ， 如 图 8-2 所 示 。 


Explaining the Document Object Model 


| 
仿 四 名 


What is the Document Object Model? 


The W3C defines the DOM as: 


A platform- and language-neutral interface that will allow programs and scripts to dynamically 
access and update the content, structure and style of documents . 


lt is an APl that can be used to navigate HTML and XML documents . 


图 8-2 
8.3.3 JavaScript 


缩 略 语 (<abbr> 标 签 ) 的 title 属性 在 浏览 器 里 是 隐藏 的 。 有 些 浏 览 器 会 在 你 把 鼠标 指针 其 
停 在 缩 略语 上 时 ， 将 它 的 title 属性 显示 为 一 个 弹出 式 的 提示 消息 。 就 像 浏 览 器 所 使 用 的 默认 村 
式 一 样 ， 浏 览 器 对 缩 略 语 的 默认 呈现 行为 也 是 各 有 各 的 做 法 。 

就 像 我 们 可 以 用 自己 的 CSS 样式 表 去 取代 浏览 器 所 使 用 的 默认 样式 那样 ,你 也 可 以 用 DOM 
去 改变 浏览 器 的 默认 行为 。 


8.4 显示 “ 缩 略 语 列表 ” 


要 能 把 这 些 <abbr> 标 签 中 的 title 属性 集中 起 来 显示 在 一 个 页 面 该 多 好 ! 用 一 个 定义 列表 
元 素来 显示 这 些 <abbr> 标 签 包含 的 文本 和 title 属性 最 合适 不 过 了 。 下 面 是 我 希望 得 到 的 定义 
列表 : 


tt 
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<dl> 
<dt>w3C</dt> 
<dd>World Wide Web Consortium</dd> 
<dt>DOM</dt> 
《dd>Document Object Model</dd> 
<dt>API</dt> 
«<dd>Application Programming Interface</dd> 
<dt>HTML</dt> 
<dd>HyperText Markup Language</dd> 
<dt>XML</dt> 
<dd>eXtensible Markup Language</dd> 
</dl> 


你 可 以 使 用 DOM 来 创建 这 个 定义 列表 ， 有 具体 步骤 如 下 。 


(1) 遍历 这 份 文 档 中 的 所 有 abbr 元 素 。 

(2) 保存 每 个 abbr 元 素 的 title 属性。 

(3) 保存 每 个 abbr 元 素 包含 的 文本 。 

(4) 创建 一 个 “定义 列表 ”元 素 〈 即 dl 元 素 )。 
(5) 遍历 刚才 保存 的 title 属性 和 abbr 元 素 的 文本 。 
(6) 创建 一 个 “定义 标题 ”元 素 ( 即 此 元 素 )。 
(7) 把 abbr 元 素 的 文本 插入 到 这 个 此 元 素 。 

(8) 创建 一 个 “定义 描述 ”元 素 ( 即 dd 元素)。 
(9) 把 title 属性 插入 到 这 个 dd 元素。 

(10) 把 此 元 素 追 加 到 第 4 步 创建 的 dl 元素 上 。 
(11) 把 dd 元 素 追 加 到 第 4 步 创建 的 di 元 素 上 。 


(12) 把 di 元 素 追 加 到 explanation.html 文档 的 body 元 素 上 。 


我 们 编写 一 个 函数 来 做 上 面 这 些 事 。 


8.4.1 编写 displayAbbreviations 函数 


我 们 把 这 个 函数 命名 为 displayAbbreviations()。 创 建 一 个 名 为 displayAbbreviations.js 的 文 


件 并 将 其 存放 到 子 目 录 scripts。 
第 一 步 是 定义 这 个 函数 。 因 为 它 不 需要 任何 参数 ， 所 以 函数 名 后 面 的 


function displayAbbreviations() { 


圆 括号 将 是 空 的 : 


开始 遍历 这 份 文档 里 的 所 有 abbr 元 素 之 前 ， 我 们 必须 先 把 它们 找 出 来 。 这 可 以 用 


var abbreviations = document.getElementsByTagName("abbr"); 


getElementsByTagName 方法 轻松 完成 : 只 需 把 abbr 作为 参数 传递 给 这 个 方法 , 它 就 会 返回 一 个 包含 
这 个 文档 里 的 所 有 abbr 元 素 的 节点 集合 。 (前面 提 到 过 ， 节 点 集合 就 是 一 个 由 节点 构成 的 数组 ) 。 
我 把 这 个 数组 保存 到 变量 abbreviations 里 : 


现在 ， 我 们 可 以 开始 遍历 abbreviations 数组 了 ,但 在 遍历 之 前 先进 行 一 些 测 试 。 我 们 知道 


在 这 份 文档 里 有 一 些 缩 略语 , 但 并 非 所 有 的 文档 都 这 样 。 如 果 想 让 这 个 函数 还 能 适用 于 其 他 文档 ， 
就 应 该 先 去 检查 一 下 当前 文档 是 不 是 包含 有 缩 略 语 ， 再 决定 要 不 要 走 下 一 步 。 
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查询 一 下 abbreviations 数组 的 length 属性 ， 我 们 就 能 知道 这 个 文档 里 有 多 少 个 缩 略 语 。 如 
果 abbreviations.1ength 小 于 1， 就 说 明 这 个 文档 里 没有 缩 略 语 。 如 果真 是 这 样 ， 这 个 国 数 就 应 该 
立刻 停止 执行 并 返回 一 个 布尔 值 false: 


if (abbreviations,.length < 1) return false; 

如 果 文 档 里 没有 abbr 元 素 ， 这 个 函数 将 就 此 结束 。 

下 一 步 是 获取 并 保存 每 个 abbr 元 素 提 供 的 信息 。 我 们 需要 得 到 每 个 <abbr> 标 签 包含 的 文本 及 
其 title 属性 的 值 。 当 你 需要 把 像 这 样 的 一 系列 数据 保存 起 来 时 ， 数 组 是 理想 的 存储 媒介 。 定 义 
一 个 名 为 defs 的 新 数组 : 


var defs = new Array(); 

现在 开始 遍历 abbreviations 数组 : 

for (var i=0; icabbreviations.length; i++) { 

为 了 得 到 当前 缩 略 语 的 解释 文字 ， 用 getAttribute() 方 法 得 到 title 属性 的 值 ， 并 把 值 保存 
到 变量 definition 里 : 

var definition = abbreviations[i].getAttribute("title"); 


要 得 到 <abbr> 标 签 包含 的 缩 略 语文 本 需要 nodeValue 属性 。 实 际 上 是 需要 拿 到 abbr 元 素 里 的 
文本 节 所 的 值 。 在 explanation.htm| 文档 中 的 每 个 abbr 元 素 里 ， 文 本 节点 都 是 这 个 元 素 中 部 的 第 
一 个 (也 是 仅 有 的 一 个 ) 节点 。 换 名 话说 ， 这 个 文本 节点 是 abbr 元 素 节 点 的 第 一 个 子 节点 ， 也 
是 最 后 一 个 子 节点 : 

abbreviations[i].1astChild 

下 面 这 条 语句 得 到 这 个 文本 节点 的 nodeValue 属性 并 把 它 赋值 给 变量 key: 


var key = abbreviations[i].1lastChild.nodeValue; 


现在 有 两 个 变量 了 : definition 和 key。 这 两 个 变量 的 值 就 是 我 想 保存 到 defs 数组 里 的 内 容 。 
我 们 通过 把 其 中 之 一 用 作 数 组 元 素 的 下 标 〈 键 ) ， 另 一 个 用 作 数 组 元 素 的 值 的 方式 来 同时 保存 这 
两 个 值 : 

defs[key] = definition; 

defs 数组 中 的 第 一 个 元 素 的 下 标 是 WC， 值 是 Wor1d Wide Web Consortium，defs 数组 中 的 第 二 
个 元 素 的 下 标 是 DOM， 值 是 Document 0bject Mode1， 依 次 类 推 。 

下 面 是 这 个 for 循环 的 完整 代码 : 


for (var i=0; icabbreviations.length; i++) { 
var definition = abbreviations[i].getAttribute("title"); 
var key = abbreviations[i].lastChild.nodeValue; 
defs[key] = definition; 


为 提高 这 个 循环 的 可 读 性 ， 建 议 你 把 abbreviations[ 计 的 值 你 在 本 次 循环 里 正在 被 遍历 
的 那个 abbreviations 数组 元 素 一 一 赋 给 一 个 名 为 current_abbr 的 变量 ， 
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for (var i=0; ic<abbreviations.length; i++) { 
var current abbr = abbreviations[i]; 
var definition = current abbr.getAttribute("title"); 
var key = current abbr.1astChild.nodeValue; 
defs[key] = definition; 


如 果 你 觉得 current_abbr 变量 可 以 帮助 你 更 好 地 理解 这 段 代码 ， 那 就 把 它 留 在 那里 好 了 。 额 
外 增加 一 条 这 样 的 语句 只 是 一 个 非常 小 的 开销 。 
从 理论 上 讲 ， 你 完全 可 以 把 整个 循环 体 写 成 一 条 语句 ， 但 那 会 让 代码 非常 难以 阅读 : 


for (var i=0; icabbreviations.length; i++) { 
defs[abbreviations[i].lastChild.nodeValue] = abbreviations[i].getAttribute("title"); 


在 编写 JavaScript 代码 时 ， 许 多 操作 都 有 多 种 实现 办 法 。 就 拿 上 面 这 个 for 循环 来 说 ， 你 已 
经 看 到 了 三 种 不 同 的 写法 。 选 出 一 种 最 适合 你 的 写法 用 在 你 的 脚本 里 。 如 果 在 编写 某 些 代码 时 你 
就 觉得 它们 不 容易 理解 ， 等 日 后 再 去 阅读 它们 的 时 候 就 会 更 加 困难 。 

现在 ， 我 已 经 把 那些 缩 略语 及 其 解释 保存 到 了 defs 数组 里 。 接 下 来 我 们 要 创建 标记 以 便 把 
这 些 内 容 显示 在 页 面 上 。 


8.4.2 ”创建 标记 


定义 列表 是 表现 缩 略语 及 其 解释 的 理想 结构 。 定义 列表 (<d1>) 由 一 系列 “定义 标题 ”(<dt>) 
和 相应 的 “定义 描述 ”(<dd>) 构成 : 


<dl> 
<dt>Title 1</dt> 
<dd>Description 1</dd> 
<dt>Title 2</dt> 
<dd>Description 2</dd> 
</dl> 


用 createElement 方法 创建 这 个 定义 列表 ， 并 把 这 个 新 创建 的 元 素 赋值 给 变量 dlist: 
var dlist = document.createElement("dl"); 


由 上 面 这 条 语句 创建 出 来 的 di 元 素 只 是 JavaScript 世界 里 的 一 个 孤儿 。 稍 后 我 们 将 通过 它 的 
引用 ， 也 就 是 dlist 变量 ， 把 它 添加 到 explanation.html 文档 中 。 

现在 需要 再 编写 一 个 循环 ， 对 刚刚 创建 的 defs 数组 进行 遍历 。 这 次 我 们 还 是 使 用 for 循环 ， 
不 过 这 次 与 前 面 编写 的 那个 for 循环 有 点 儿 不 一 样 。 你 可 以 利用 一 个 for/in 循环 把 某 个 数组 的 下 
标 ( 键 ) 临时 赋值 给 一 个 变量 : 


for (variable in array) 


在 进入 第 一 次 循环 时 ， 变 量 variable 将 被 赋值 为 数组 array 的 第 一 个 元 素 的 下 标 值 ， 在 进入 
第 二 次 循环 时 ， 变 量 variable 将 被 赋值 为 数组 array 的 第 二 个 元 素 的 下 标 值 ， 依 次 类 推 ， 直 到 遍 
历 完 数组 array 里 的 所 有 元 素 为 止 。 这 就 是 我 们 遍历 关联 数组 defs 的 方式 : 
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for (key in defs) { 

上 面 这 行 代码 的 含义 是 “对 于 defs 关联 数组 里 的 每 个 键 ， 把 它 的 值 赋 给 变量 key”。 在 接 下 
来 的 循环 体 部 分 ， 变 量 key 可 以 像 其 他 变量 那样 使 用 。 具 体 到 这 个 例子 ， 因 为 变量 key 的 值 是 当 
前 正在 处 理 的 数组 元 素 的 键 ， 所 以 可 以 利用 它 得 到 相应 的 数组 元 素 的 值 : 


var definition = defs[key]; 


在 这 个 for/in 循环 的 第 一 次 循环 里 , 变量 key 的 值 是 W3C， 变量 definition 的 值 是 World Wide 
Web Consortium;， 在 第 二 次 循环 里 ， 变 量 key 的 值 是 DOM， 变 量 definition 的 值 是 Document Object 
Model。 

每 次 循环 都 需要 创建 一 个 元 素 和 一 个 dd 元素 。 我 们 还 需要 创建 相应 的 文本 市 点 并 把 它们 
分 别 添加 到 新 创建 的 此 和 dd 元 素 。 

先 创建 此 元 素 ; 

var dtitle = document.createElement("dt"); 

然后 用 变量 key 的 值 去 创建 一 个 文本 市 点 : 

var dtitle text = document.createTextNode(key); 

我 们 已 经 创建 了 两 个 节点 。 新 创建 的 元 素 节 点 被 赋值 给 变量 此 itle。 把 新 创建 的 文本 节点 赋 
值 给 变量 dtitle_text。 使 用 appendChi1d() 方 法 把 dtitle_text 文本 节点 添加 到 dtitle 元 素 节 点 : 

dtitle.appendChild(dtitle text); 

重复 这 个 过 程 创 建 dd 元 素 : 

var ddesc = document.createElement("dd"); 

这 次 用 变量 definition 的 值 创建 一 个 文本 节点 : 

var ddesc text = document.createTextNode(definition); 

再 一 次 把 文本 节点 添加 到 元 素 节 点 : 

ddesc.appendChild(ddesc text); 

现在 ,我 们 有 了 两 个 元 素 节 点 :dtitle 和 ddesc。 这 两 个 元 素 节 点 分 别 包含 文本 节点 ditle text 
和 ddesc text。 

在 结束 循环 之 前 ， 接 着 把 新 创建 的 此 和 dd 元 素 追 加 到 稍 早 创建 的 di 元 素 上 。 一 一 这 个 dl 
元 素 已 经 被 赋 给 了 变量 dlist: 


dlist.appendChild(dtitle); 
dlist.appendChild( ddesc); 


下 面 是 这 个 for/in 循环 的 完整 代码 : 


for (key in defs) { 
var definition = defs[key]; 
var dtitle = document.createElement("dt"); 
var dtitle text = document.createTextNode(key); 
dtitle.appendChild(dtitle text); 
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var ddesc = document.createElement("dd"); 
var ddesc text = document.createTextNode(definition); 
ddesc.appendChild(ddesc text); 
dlist.appendChild(dtitle); 
dlist.appendChild(ddesc); 

} 


到 了 这 个 阶段 ， 我 们 的 定义 列表 就 完成 了 。 它 作为 一 个 DocumentFragment 对 象 已 经 存在 于 


JavaScript 上 下 文 里 。 接 下 来 的 工作 是 把 它 插 入 到 文档 中 去 。 
1. 插入 这 个 定义 列表 


与 其 把 这 个 定义 列表 罕 元 地 插入 文档 , 不 如 给 它 加 上 一 个 描述 


效果 。 
先 创建 一 个 n2 元 素 闻 点 : 
var header = document.createElement("h2"); 
再 创建 一 个 内 容 为 Abbreviations 的 文本 节点 
var header text = document.createTextNode("Abbreviations"); 
然后 把 文本 节点 添加 到 h2 元素 节 点 
header.appendChild(header text); 


术 性 标题 ， 这 检 


应 该 会 有 更 好 的 


对 于 结构 比较 复杂 的 文档 ， 或 许 还 需要 借助 于 特定 的 id 才能 把 新 创建 的 元 素 插入 到 文档 里 


的 特定 位 置 
标签 上 即 可 。 


o 


因为 explanations .html 文档 的 结构 并 不 复杂 , 所 以 只 要 把 新 创建 的 元 素 追 加 到 body 


引用 body 标签 的 具体 做 法 有 两 种 。 第 一 种 是 使 用 DOM Core， 即 引用 某 给 定 文档 的 第 


(也 是 仅 有 的 一 个 ) body 标签 : 


document ,getElementsByTagName("body")[0] 


第 二 种 做 法 是 使 用 HIML-DOM， 即 引用 某 给 定 文档 的 body 属性 : 


document .body 

首先 ， 插 入 “ 缩 略 语 表 ”的 标题 : 
document .body.appendChild(header); 

然后 ， 插 入 “ 缩 略语 表 ” 本 身 : 

document. body.appendChild(dlist); 
displayAbbreviations() 函 数 终于 全 部 完成 : 


function displayAbbreviations() { 
var abbreviations = document.getElementsByTagName("abbr"); 
if (abbreviations.length < 1) return false; 
var defs = new Array(); 
for (var i=0; icabbreviations.length; i++) { 
var current abbr = abbreviations[i]; 
var definition = current abbr.getAttribute("title"); 
var key = current abbr.1astChild.nodeValue; 
defs[key] = definition; 


var dlist = document.createElement("dl"); 
for (key in defs) { 
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var definition = defs[key]; 
var dtitle = document.createElement("dt"); 
var dtitle text = document.createTextNode(key); 
dtitle.appendChild(dtitle text); 
var ddesc = document.createElement("dd"); 
var ddesc text = document.createTextNode(definition); 
ddesc .appendChild(ddesc text); 
dlist.appendChild(dtitle); 
dlist.appendChild(ddesc); 
} 
var header = document.createElement("h2"); 
var header text = document,.createTextNode("Abbreviations"); 
header.appendChild(header text); 
document.body.appendChild(header); 
} document.body.appendChild(dlist); 


和 往常 一 样 ， 这 个 函数 还 有 不 少 需 要 改进 的 余地 。 

2. 检查 兼容 性 

在 这 个 函数 的 开头 部 分 , 应 该 安排 一 些 检查 以 确保 浏览 器 能 够 理解 你 这 个 函数 里 用 到 的 那些 
DOM Es 这 个 函数 用 到 了 getElementsByTagName、createElement 和 createTextNode。 你 可 以 分 
别 检查 这 几 个 方法 是 否 存在 : 


if en return false; 
if (!document.createElement) return false; 
if (!document.createTextNode) return false; 


当然 ， 也 可 以 把 这 儿 项 测试 合并 为 一 条 语句 : 


if (ldocument.getElementsByTagName || !document.createElement 
ww|| !document.createTextNode) return false; 


这 两 种 做 法 并 无 区 别 ， 你 可 以 根据 自己 的 个 人 习惯 选择 一 种 使 用 。 
displayAbbreviations 函数 有 点 长 ， 应 该 在 它 的 代码 里 加 上 一 些 注释 。 


function displayAbbreviations() { 
if (ldocument.getElementsByTagName || !document.createElement 
|| !document.createTextNode) return false; 
// 取得 所 有 缩 略 词 
var abbreviations = document.getElementsByTagName("abbr"); 
if (abbreviations.length < 1) return false; 
var defs = new Array(); 
// 遍历 这 些 缩 略 词 
for (var i=0; i<abbreviations.length; i++) { 
var current abbr = abbreviations[i]; 
var definition = current abbr.getAttribute("title"); 
var key = current abbr.1astChild.nodeValue; 
defs[key] = definition; 


} 
// 创建 定义 列表 

var dlist = document.createElement("d1l"); 
// 遍历 定义 

for (key in defs) { 

var definition = defs[key]; 

// 创建 定义 标题 
var dtitle = document.createElement ("dt"); 
Var dtitle text = document.createTextNode(key); 
dtitle.appendChild(dtitle text); 
// 创建 定义 描述 
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Var ddesc = document.createElement("dd"); 
var ddesc text = document. createTextNode(definition); 
ddesc.appendChild(ddesc text); 
// 把 它们 添加 到 定义 列表 
dlist.appendChild(dtitle); 
dlist.appendChild(ddesc); 


} 
// 创建 标题 
Var header = document.createElement("h2"); 
var header text = document.createTextNode("Abbreviations"); 
header.appendChild(header text); 
// 把 标题 添加 到 页 面 主体 
document.body.appendChild(header); 
// 把 定义 列表 添加 到 页 面 主体 
document.body.appendChild(dlist); 


这 个 函数 应 该 在 页 面 加 载 时 被 调用 。 你 可 以 通过 window.on1oad 事件 来 做 到 这 一 点 

window.onload = displayAbbreviations; 

为 了 日 后 能 够 方便 地 把 多 个 事件 添加 到 window.onload 处 理 函 数 上 ， 最 好 使 用 addLoadEvent 
函数 来 完成 这 一 工作 。 首 先 , 编写 addLoadEvent 函数 并 把 它 保 存 为 一 个 新 的 JavaScript 脚本 文件 ， 
将 新 文件 命名 为 addLoadEvent .js 并 把 它 存 入 scripts 文件 夹 : 


function addLoadEvent(func) { 
var oldonload = window.onload; 


if (typeof window.onload != 'function’) { 
window.onload = func; 
} else { 
window.onload = function() { 
oldonload(); 
func(); 
} 


} 

然后 ， 把 下 面 这 条 语句 添加 到 displayAbbreviations.js 文件 里 : 

addLoadEvent(displayAbbreviations); 

现在 ，JavaScript 脚本 文件 都 已 经 准备 好 了 。 接 下 来 ,为 了 调用 这 两 个 JavaScript 脚本 文件 ， 
我 们 需要 在 explanation.html 文件 的 <head> 部 分 添加 一 些 <script> 标 签 ， 如 下 所 示 : 


<script src="scripts/addLoadEvent.js"></script> 
«<script src="scripts/displayAbbreviations.js"></script> 


注意 请 确保 先 包 含 addLoadEvent.js， 因 为 displayAbbreviations.js 依赖 于 它 。 在 真实 项 目 中 ， 
你 通常 还 需要 压缩 脚本 , 并 把 它们 合并 成 一 个 文件 (如 第 5 章 所 示 )。 对 我 们 的 例子 来 说 ， 
保持 多 个 JavaScript 文件 和 较 多 的 宛 余 空 卸 有 助 于 大 家 理解 和 试验 。 


最 终 的 标记 
人 explanation.html] 文件 : 


<“!DOCTYPE html> 
<html lang="en"> 
<head> 
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<meta charset="utf-8” /> 
<title>Explaining the Document Object Model</title> 
<link rel="stylesheet" media="screen" 
whref="styles/typography.css” /> 
</head> 
<body> 
<h1>What is the Document Object Model?</h1> 
<p> 
The «<abbr title="World Wide Web Consortium">W3C</abbr> defines 
wthe <abbr title="Document Object Model">DOM</abbr> as: 
</p> 
<blockquote cite="http://www.w3.org/DOM/"> 
<p> 
A platform- and language-neutral interface that will allow programs 
wand scripts to dynamically access and update the 
wcontent, structure and style of documents. 
</p> 
</blockquote> 
<p> 
It is an <abbr title="Application Programming Interface">API</abbr> 
wthat can be used to navigate «<abbr title="HyperText Markup Language"> 
wHTML</abbr> and «abbr title="eXtensible Markup Language" >XML 
</abbr> documents . 
</p> 
<script src="scripts/addLoadEvent.js"></script> 
<script src="scripts/displayAbbreviations.js"></script> 
</body> 
</html> 


现在 ， 把 explanation.html 文件 加 载 到 Web 浏览 器 里 就 可 以 看 到 displayAbbreviations 函数 
的 效果 了 ， 如 图 8-3 所 示 。 


a pw S 
Rg LE 


What is the Document Object Model? 


The W3C defines the DOM as 


A platform- and language-neutral interface that will allow programs and scripts to dynamically 
access and update the content, structure and style of documents. 


Itis an APIthat can be used to navigate HTML and XML documents. 


Abbreviations 


wond wide Web consorium 
Document Object Model 
Application Programming Interface 

HyperText Markup Language 
eXtensible Markup Language 


8.4.3 一 个 浏览 器 “地 雷 ” 


在 此 以 前 ， 我 一 直 避 免 提 到 任何 特定 的 浏览 器 。 只 要 使 用 的 浏览 器 支持 DOM， 则 此 前 见 到 
过 的 脚本 就 都 可 以 正常 工作 。 可 是 ， 这 个 displayAbbreviations 函数 却 是 一 个 例外 。 
displayAbbreviations 函数 工作 得 确实 不 错 ， 除 非 你 使 用 的 浏览 器 是 IE6 或 更 早 的 Windows 
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版 本 。 如 果 把 explanation.html 文件 加 载 到 下 浏览 器 里 ， 不 仅 不 会 看 到 一 个 “ 缩 略 语 列表 ”， 还 

极 有 可 能 会 看 到 一 条 JavaScript 出 错 消息 。 

你 肯定 会 对 这 种 行为 感到 不 解 : 我 们 已 经 在 displayAbbreviations 函数 的 开头 部 分 加 上 了 对 
象 探测 语句 ， 以 确保 只 有 支持 DOM 的 浏览 器 才 会 去 执行 DOM 代码 ,了 下 浏览 器 对 
getElementsByTagName 和 getElementById 方 法 的 支持 也 毋庸 置疑 ， 为 什么 还 会 出 现 这 样 的 问题 呢 ? 

事情 还 要 从 本 书 第 1 章 里 提 到 的 浏览 器 大 战 说 起 。 在 那 场 大 战 中 ,网 景 公司 和 微软 公司 曾 把 
<abbr> 和 <acronym> 标 签 当 做 它们 的 武器 之 一 。 在 竞争 最 激烈 时 ， 微 软 决定 不 在 自己 的 浏 览 器 里 实 
现 abbr 元 素 。 

那 场 浏览 器 大 战 早已 烟消云散 , 最 终 的 结果 是 微软 打败 了 网 景 , 但 微软 的 正 浏览 器 直到 IE7 
才 支 持 abbr 元 素 。displayAbbreviations 函数 在 早期 版 本 中 失败 ， 是 因为 它 试图 从 一 些 abbr 元 素 
节点 那里 提取 属性 节点 和 文本 节点 ， 而 正 浏 览 器 却 拒 绝 承 认 那 些 abbr 节点 的 “元 素 ” 地 位 。 

我 们 意外 地 踏 上 了 一 颗 在 一 场 早 已 结束 的 战争 中 埋藏 下 来 的 “地 雷 ”! 

可 供 选 择 的 解决 方案 有 三 种 。 

D 把 abbr 元素 统一 替换 为 acronym 元 素 。 我 对 这 种 解决 方案 不 感 兴趣 , 因为 我 不 想 为 了 迁就 

一 种 顽固 不 化 的 浏览 器 而 “牺牲 ”一 大 批语 义 正确 的 标记 。 

D 在 元 素 中 使 用 html 命名 空间 (<html:abbr>abbr</html:abbr>)， 这 样 正 就 可 以 认 出 这 些 元 
素 。 这 个 方案 涉及 修改 标记 ， 如 果 要 在 其 他 的 文档 中 使 用 displayAbbreviations 函数 ， 问 
题 仍 得 不 到 解决 。 

口 保证 displayAbbreviations 函数 在 正 中 能 够 平稳 退化 。 这 个 方案 实现 起 来 最 简单 , 也 最 容 
易 被 人 接受 。 只 要 多 写 几 行 代 码 ，IE (或 其 他 不 能 识别 abbr 元 素 的 浏览 器 ) 就 可 以 提前 
退出 。 

所 以 ， 我 们 选用 第 三 种 。 

首先 ， 在 负责 从 abbr 元 素 提取 title 属性 值 和 文本 值 的 for 循环 里 添加 一 条 语句 : 


for (var i=0; i<abbreviations.length; i++) { 
var current abbr = abbreviations[i]; 
if (current abbr.childNodes.length < 1) continue; 
var definition = current abbr.getAttribute("title"); 
var key = current abbr.1astChild.nodeValue; 
defs[key] = definition; 


这 条 新 增 语 句 的 含义 是 :“ 如 果 当 前 元 素 没 有 子 市 点 ， 就 立刻 开始 下 一 次 循环 "。 因 为 正 浏 
览 器 在 统计 abbr 元 素 的 子 节 点 个 数 时 总 是 会 返回 一 个 错误 的 值 一 一 零 ， 所 以 这 条 新 语句 会 让 下 
浏览 器 不 再 继续 执行 这 个 循环 中 的 后 续 代 码 。 

当 正 浏览 器 执行 到 displayAbbreviations 函数 中 负责 创建 “ 缩 略 语 列表 ”的 那个 for 循环 时 ， 
因为 defs 数组 是 空 的 ， 所 以 它 将 不 会 创建 出 任何 此 和 dd 元 素 。 我 们 在 那个 for 循环 的 后 面 添加 
这 样 一 条 语句 : 如 果 对 应 于 “ 缩 略语 列表 ”的 那个 dl 元 素 没 有 任何 子 节 点 ， 则 立刻 退出 
displayAbbreviations 国 数 : 


// 创建 定义 列表 
var dlist = document.createElement("d1"); 
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/ 遍历 所 有 定义 
for (key in defs) { 
var definition = defs[key]; 
// 创建 定义 标题 
var dtitle = document.createElement("dt"); 
var dtitle text = document.createTextNode(key); 
dtitle.appendChild(dtitle text); 
// 创建 定义 描述 
var ddesc = document.createElement("dd"); 
var ddesc text = document.createTextNode(definition); 
ddesc.appendChild(ddesc text); 
// 把 它们 添加 到 定义 列表 
dlist.appendChild(dtitle); 
dlist.appendChild(ddesc); 


if (dlist.childNodes.length < 1) return false; 


请 注意 ， 新 添加 的 这 条 if 语句 又 一 次 违背 了 结构 化 程序 设计 原则 (一 个 函数 应 该 只 有 一 个 
入 口 和 一 个 出 口 ) 一 一 它 等 于 是 在 函数 的 中 间 增 加 了 一 个 出 口 点 。 但 这 应 该 是 既 可 以 解决 IE 浏 
览 器 的 问题 ， 又 不 需要 对 现 有 的 函数 代码 大 动 干戈 的 最 简单 的 办 法 了 。 
下 面 是 改进 函数 之 后 的 代码 清单， 
function displayAbbreviations() { 
if (!document.getElementsByTagName || !document.createElement 
ww || !document.createTextNode) return false; 
// 取得 所 有 缩 略 词 
var abbreviations = document.getElementsByTagName("abbr"); 
if (abbreviations.length < 1) return false; 
var defs = new Array(); 
// 遍历 所 有 缩 略 词 
for (var i=0; icabbreviations.length; i++) { 
var current abbr = abbreviations[i]; 
if (current abbr.childNodes.length < 1) continue; 
var definition = current abbr.getAttribute("title"); 


var key = current abbr.1astChild.nodeValue; 
defs[key] = definition; 


} 
// 创建 定义 列表 
var dlist = document.createElement("d1l"); 
// loop through the definitions 
for (key in defs) { 
var definition = defs[key]; 
// 创建 定义 标题 
var dtitle = document.createElement("dt"); 
var dtitle text = document.createTextNode(key); 
dtitle.appendChild(dtitle text); 
// 创建 定义 描述 
var ddesc = document.createElement("dd"); 
var ddesc text = document.createTextNode(definition); 
ddesc.appendChild(ddesc text); 
// 把 它们 添加 到 定义 列表 
dlist.appendChild(dtitle); 
dlist.appendChild( ddesc); 


if (dlist.childNodes.length < 1) return false; 
// 创建 标题 
var header = document.createElement("h2"); 
var header text = document.createTextNode("Abbreviations"); 
header. ‘appendChild(header _ text); 
// 把 标题 添加 到 页 面 主体 
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document.body.appendChild(header); 


// 把 定义 列表 添加 到 页 面 主体 
document. body.appendChild(dlist); 


这 两 条 新 语句 将 确保 explanation.html 文档 就 算 遇 到 那些 不 理解 abbr 元 素 的 浏览 器 也 不 会 出 
问题 。 它 们 就 像 是 一 条 保险 强 ， 其 作用 与 脚本 开头 部 分 的 对 象 探测 语句 很 相似 。 


注意 即使 某 种 特定 的 浏览 器 会 引起 问题 ， 也 没有 必要 使 用 浏览 器 嗅 探 代码 。 对 浏览 器 的 名 称 
和 版 本 号 进行 嗅 探 的 办 法 很 难 做 到 面面俱到 ， 而 且 往 往 会 导致 非常 复杂 难 解 的 代码 。 


我 们 已 经 成 功 地 排除 了 一 颗 在 过 去 的 浏览 器 大 战 中 遗留 下 来 的 “地 雷 "。 如 果 有 什么 教训 的 
话 ， 那 就 是 它 可 以 让 我 们 深刻 地 体会 到 标准 的 重要 性 。 仅 仅 因 为 下 浏览 器 不 支持 abbr 元 素 ， 就 
使 得 一 大 批 用 户 没 有 机 会 看 到 一 个 自动 生成 的 “ 缩 略 语 列表 "， 这 个 事实 让 我 感到 很 遗憾 ， 但 这 
些 用 户 仍 能 看 到 页 面 上 的 核心 内 容 。 缩 略语 列表 是 一 种 很 好 的 增强 补充 ， 它 还 算 不 上 是 页 面 必 不 
可 少 的 组 成 部 分 。 如 果 它 真 的 必 不 可 少 ， 从 一 开始 就 应 该 把 它 包括 在 标记 里 。 
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displayAbbreviations 函数 是 一 个 充实 文档 内 容 的 好 例子 (至少 对 那些 不 是 下 的 浏览 器 来 说 
是 如 此 )。 它 从 文档 结构 提取 出 了 一 些 内 容 并 以 一 种 清晰 的 方式 显示 出 来 。 那 些 原本 包含 在 abbr 
标签 的 title 属性 里 的 信息 现在 直接 呈现 在 了 浏览 器 窗口 里 。 现 在 ， 我 们 来 看 另 一 个 增强 文档 的 
例子 。 请 大 家 仔细 看 explanation.html 文档 中 的 这 段 标 记 : 

<blockquote cite="http://www.w3.0rg/DOM/"> 

<p> 

A platform- and language-neutral interface that will allow programs 

wand scripts to dynamically access and update the 

wcontent, structure and style of documents. 

</p> 
</blockquote> 


blockquote 元 素 包 含 一 个 属性 cite。 这 是 一 个 可 选 属 性 ,你 可 以 给 它 一 个 URL 地 址 ， 告 诉 人 
们 blockquote 元 素 的 内 容 引 自 哪 里 。 从 理论 上 讲 , 这 是 一 个 把 文献 资料 与 相关 网 页 链接 起 来 的 好 
办 法 ;但 在 实践 中 ， 浏 览 器 会 完全 忽视 cite 属性 的 存在 。 虽 然 信息 就 在 那里 ,但 用 户 却 无 法 看 
到 它们 。 利 用 JavaScript 语言 和 DOM， 我 们 完全 可 以 把 那些 信息 收集 起 来 ， 并 以 一 种 更 有 意义 
的 方式 把 它们 显示 在 网 页 上 。 

我 们 计划 按照 以 下 步骤 将 文献 以 链接 形式 显示 出 来 。 

(1) 遍历 这 个 文档 里 所 有 blockquote 元 素 。 

(2) 从 blockquote 元 素 提 取出 cite 属性 的 值 。 

(G3) 创建 一 个 标识 文本 是 source 的 链接 。 

(4) 把 这 个 链接 赋值 为 plockquote 元 素 的 cite 属性 值 。 

(5) 把 这 个 链接 插入 到 文献 节选 的 末尾 。 
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和 显示 缩 略语 列表 一 样 ， 我 们 将 根据 上 述 步骤 编写 一 个 JavaScript 函数 。 


编写 displayCitations 函数 


我 们 将 新 函数 命名 为 displayCitations， 将 它 保 存在 displayCitations .js 文件 中 。 


首先 ， 因 为 它 不 需要 任何 参数 ， 


function displayCitations() { 


所 以 函数 名 后 面 的 圆 括 号 将 是 空 的 : 


第 一 步 是 把 文档 里 的 所 有 blockquote 元 素 找 出 来 。 使 用 getElementsByTagName 方法 完成 这 项 
查找 工作 ， 并 把 找到 的 节点 集合 保存 为 变量 quotes: 


var quotes = document.getElementsByTagName("blockquote"); 


接 下 来 遍历 这 个 集合 : 


for (var i=0; icquotes.length; i ++) { 


在 这 个 循环 里 ， 我 们 只 对 有 ci 


te 属性 的 文献 市 选 感 兴趣 。 我 们 用 一 个 简单 的 测试 检查 本 次 


循环 中 的 当前 文献 节选 有 没有 这 个 属性 。 


用 getAttribute 方法 测试 节 


点 集合 quotes 中 的 当前 元 素 ( 即 quotes[i]) ， 如 果 


getAttribute("cite") 的 结果 为 真 ， 就 说 明 这 个 节点 有 cite 属性 ， 如 果 !getAttribute("cite") 的 结 
果 为 真 ， 就 说 明 这 个 节点 没有 cite 属性 。 如 果 是 后 一 种 情况 ， 使 用 continue 立刻 跳 到 下 一 次 循 
环 ， 不 再 继续 执行 本 次 循环 中 的 后 续 语 句 : 


if (!quotes[i].getAttribute("cite")) { 


continue; 


也 可 以 把 这 条 语句 写成 下 面 这 样 : 

if (lquotes[il].getAttribute("cite")) continue; 

接 下 来 的 语句 将 只 有 当前 blockquote 元 素 有 cite 属性 的 情况 下 才 会 执行 。 
首先 ， 得 到 当前 blockquote 元 素 的 cite 属性 值 并 把 它 存 入 变量 ur1: 


var url = quotes[i].getAttribute( 


"cite"); 


下 一 步 是 确定 应 该 把 “文献 来 源 链 接 ” 放 到 何 处 。 这 似乎 是 一 项 非常 简单 的 任务 。 


1. 查找 你 的 元 素 


一 个 blockquote 元 素 必 定 包含 块 级 元 素 ， 如 文本 段落 ， 以 容纳 被 引用 的 大 段 文本 。 我 们 想 


把 “文献 来 源 链接 ” 放 在 blockquote 


元 素 所 包含 的 最 后 一 个 子 元 素 节 点 之 后 。 显 然 我 们 应 该 先 找 


到 当前 blockquote 元 素 的 1astChi1d 属性 : 


quotes[i].1astChild 


可 是 ， 这 样 我 们 就 会 遇 到 一 个 问题 。 请 大 家 再 仔细 看 看 这 段 标记 : 
<blockquote cite="http://www.w3.0rg/DOM/"> 


<p> 
A platform- and language-neutral 


interface that will allow programs 


wand scripts to dynamically access and update the 
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wcontent, structure and style of documents. 
</p> 
</blockquote> 


乍 看 起 来 , blockquote 元 素 的 最 后 一 个 子 节点 应 该 是 那个 p 元素 , 而 这 意味 着 lastChild 属性 
的 返回 值 将 是 一 个 p 元 素 节 点 。 可 是 ， 事 实 却 并 不 一 定 如 此 。 

那个 p 节点 的 确 是 blockquote 元 素 的 最 后 一 个 元 素 节 点 。 但 在 </p> 标 签 和 </b1ockquote> 标 签 
之 间 还 存在 着 一 个 换行 符 。 有 些 浏 览 器 会 把 这 个 换行 符 解释 为 一 个 文本 节点 。 这 样 一 来 ， 
blockquote 元 素 节点 的 lastChild 属性 就 将 是 一 个 文本 节点 而 不 是 那个 p 元 素 节 点 。 


注意 在 编写 DOM 脚本 时 , 你 会 想当然 地 认为 某 个 节点 肯定 是 一 个 元 素 节 点 , 这 是 一 种 相当 常 
见 的 错误 。 如 果 没 有 百分之百 的 把 握 ,， 就 一 定 要 去 检查 nodeType 属性 值 。 有 很 多 DOM 方 
法 只 能 用 于 元 素 节 点 ， 如 果 用 在 了 文本 节点 身上 ， 就 会 出 错 。 


DOM 已 经 提供 了 一 个 非常 有 用 的 lastchild 属性 ， 如 果 它 能 再 为 我 们 提供 一 个 
lastChildElement 属性 就 更 好 了 。 但 令 人 遗憾 的 是 它 没有 。 还 好 , 你 可 以 利用 已 有 的 DOM 方法 和 
属性 编写 一 些 语句 ， 完成 这 项 任务 。 

你 可 以 把 包含 在 当前 blockquote 元 素 里 的 所 有 元 素 节 点 找 出 来 。 如 果 把 通配符 “*” 作 为 参 
数 传递 给 getElementsByTagName 方法 ， 它 就 会 把 所 有 的 元 素 ， 不 管 标签 名 是 什么 ， 一 一 返回 给 我 
们 : 


var quoteElements = quotes[i].getElementsByTagName("*"); 


变量 quoteElements 是 一 个 数组 ， 它 包含 当前 blockquote 元 素 ( 即 quotes[i]) 所 包含 的 全 体 元 素 
节点 。 

现在 , blockquote 元 素 所 包含 的 最 后 一 个 元 素 节 点 将 对 应 着 quoteElements 数组 中 的 最 后 一 个 
元 素 。 数 组 中 的 最 后 一 个 元 素 的 下 标 等 于 数组 的 长 度 减 去 1， 因 为 数组 的 下 标 从 零 开 始 。 记 住 
数组 中 的 最 后 一 个 元 素 的 下 标 不 等 于 数组 的 长 度 ， 而 是 数组 的 长 度 减 去 1: 


var elem = quoteElements[quoteElements.1length - 1]; 


现在 ， 变 量 elem 对 应 blockquote 元 素 所 包含 的 最 后 一 个 元 素 市 点 。 
回 到 我 们 正在 displayCitations 函数 里 编写 的 那个 循环 ， 下 面 是 已 经 写 出 来 的 代码 : 


for (var i=0; i<quotes.length; i++) { 
if (lquotes[i].getAttribute("cite")) continue; 
var url = quotes[i].getAttribpute("cite"); 
var quoteChildren = quotes[i].getElementsByTagName( '*"); 
var elem = quoteChildren[quoteChildren.length - 1]; 


与 其 假设 quoteChildren 变量 肯定 返回 一 个 元 素 市 点 数组 ， 不 如 增加 一 项 测试 来 检查 它 的 长 
度 是 否 小 于 1。 如 果 是 ， 就 用 关键 字 continue 立刻 退出 本 次 循环 : 


for (var i=0; icquotes.length; i++) { 
if (lquotes[i].getAttribute("cite")) continue; 
var url = quotes[i].getAttribute("cite"); 
var quoteChildren = quotes[i].getElementsByTagName( '*"); 
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if (quoteChildren.length < 1) continue; 
var elem = quoteChildren[ quoteChildren.length - 1]; 


我 们 已 经 把 创建 一 个 链接 所 需要 的 东西 全 准备 好 了 。 变量 ur 包含 着 将 成 为 那个 链接 的 href 
属性 值 的 字符 串 ，elem 变量 包含 着 将 成 为 那个 链接 在 文档 中 的 插入 位 置 的 节点 。 

2. 创建 链接 

用 createElement 方法 创建 一 个 “链接 ”元 素 : 

var link = document.createElement("a"); 

接 下 来 ,为 那个 新 链接 创建 一 条 标识 文本 。 用 createTextNode 方法 创建 一 个 内 容 为 Source 的 
文本 布点 : 

var link text = document.createTextNode("source"); 

现在 ， 变 量 1ink 包含 新 创建 的 a 元 素 ， 变 量 1ink_text 包含 着 新 创建 的 文本 节点 。 

用 appendchild 方 法 把 新 的 文本 市 点 插入 新 链接 : 

link.appendChild(link text); 

把 href 属性 添加 给 新 链接 。 用 setAttribute 方法 把 它 设 置 为 变量 url 的 值 : 

link. setAttribute("href" ,url); 

新 链接 已 经 创建 好 了 ， 可 以 插入 文档 中 了 。 

3. 插入 链接 

你 可 以 就 这 样 把 它 揪 入 文档 ， 也 可 以 先 用 另 一 个 元 素 ， 比 如 sup 元 素 ， 包 装 它 ， 使 它 在 浏览 
器 里 呈现 出 上 标的 效果 。 

创建 一 个 sup 元 素 市 点 并 把 它 存 和 人 变量 superscript: 

Var superscript = document.createElement("sup"); 

把 新 链接 放 入 这 个 sup 元 素 : 

superscript.appendChild(link); 

现在 ， 有 了 一 个 存在 于 JavaScript 上 下 文中 的 DocumentFragment 对 象 ， 它 此 时 尚未 被 插入 
任何 文档 : 

<sup><a href="http://www.w3.0org/DOM/">source</a></sup> 

为 了 把 这 个 标记 插入 文档 ， 你 要 把 变量 superscript 追加 为 变量 elen 的 最 后 一 个 子 节 点 。 因 
为 变量 elem 对 应 着 blockquote 元 素 目前 所 包含 的 最 后 一 个 元 素 节 点 ， 这 个 上 标 形式 的 新 链接 将 
出 现在 文献 节选 的 后 面 : 

elem.appendChild( superscript); 

最 后 ， 先 用 一 个 右 花 括号 结束 这 个 for 循环 ， 再 用 一 个 右 花 括 号 结束 整个 国 数 。 

下 面 是 displayCitations 函数 到 目前 为 止 的 代码 清单 : 

function displayCitations() { 

var quotes = document.getElementsByTagName("blockquote"); 


for (var i=0; i<quotes.length; i++) { 
if (!quotes[i].getAttribute("cite")) continue; 
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var url = quotes[il].getAttribute("cite"); 
var quoteChildren = quotes[i].getElementsByTagName('*"); 
if (quoteChildren.length < 1) continue; 
var elem = quoteChildren[ quoteChildren.length - 1]; 
var link = document.createElement("a"); 
Var link text = document.createTextNode("source"); 
link.appendChild(link text); 
link.setAttribute("href" ,url); 
var superscript = document.createElement("sup"); 
superscript.appendChild(1link); 
elem.appendChild(superscript); 
} 
} 


4. 改进 脚本 
依照 惯例 ， 总 是 会 有 需要 改进 的 地 方 。 在 这 个 函数 的 开头 部 分 增加 一 些 测试 ， 以 确保 浏览 器 
能 够 理解 这 个 函数 里 用 到 的 DOM 方法 。 为 了 让 代码 更 易于 理解 ， 你 还 应 该 加 上 一 些 注释 : 


function displayCitations() { 
if (ldocument.getElementsByTagName || !document.createElement 
w|| !document.createTextNode) return false; 
// 取得 所 有 引 
var quotes = document.getElementsByTagName("blockquote"); 
// 遍历 引用 
for (var i=0; i<quotes.length; i++) 1{ 
// 如 果 没 有 cite 属性 ， 继 续 循 环 
if (!quotes[i].getAttribute("cite")) continue; 
// 保存 cite 属性 
var url = quotes[i].getAttribute("cite"); 
// 取得 引用 中 的 所 有 元 素 节点 
var quoteChildren = quotes[i i].getElementsByTagName('*'); 
// 如 果 没 有 元 素 节 点 ， 继 续 循环 
if (quoteChildren., ,length < 1) continue; 
// 取得 引用 中 的 最 后 一 个 元 素 节 点 
var elem = quoteChildren[ quoteChildren. length - 1]; 
// 创建 标记 
var link = document.createElement("a"); 
var lin text = document .createTextNode("source"); 
link.appendChild(link text); 
link.setAttribute("href" ,url); 
var superscript = document.createElement("sup"); 
superscript.appendChild(link); 
// 把 标记 添加 到 引用 中 的 最 后 一 个 元 素 节点 
elem.appendChild(superscript); 


} 
用 addLoadEvent 函数 调用 displayCitations 国 数 : 
addLoadEvent (displayCitations); 


最 终 的 标记 
| displayCitations.js 文件 ， 还 需要 在 文档 末尾 添加 一 组 <script> 标 签 


<!DOCTYPE html> 
<htm] lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Explaining the Document Object Model</title> 
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<link rel="stylesheet" media="screen" 
whref="styles/typography.css” /> 
</head> 
<body> 

<h1>What is the Document Object Model?</h1> 

<p> 
The <abbr title="World Wide Web Consortium">W3C</abbr> defines 
wthe <abbr title="Document Object Model">DOM</abbr> as: 

</p> 

<blockquote cite="http://www.w3.org/DOM/"> 


<p> 
A platform- and language-neutral interface that will allow programs 
wand scripts to dynamically access and update the 
wcontent, structure and style of documents. 
</p> 

</blockquote> 

<p> 
It is an <abbr title="Application Programming Interface">API</abbr> 
wthat can be used to navigate «<abbr title="HyperText Markup Language"> 
wwHTIML</abbr> and <abbr title="eXtensible Markup Language" >XML 
wx</abbr> documents. 

</p> 

«script src="scripts/addLoadEvent.js"></script> 

«script src="scripts/displayAbbreviations.js"></script> 

<script src="scripts/displayCitations.js"></script> 


</body> 
</html> 
现在 , 把 explanation.html 文件 加 载 到 一 个 Web 浏览 器 里 就 可 以 看 到 效果 了 , 如 图 8-4 所 示 。 
AAA 局 各 可 the Document Object Mods = 一 


What is the Document Object Model? 


The W3C defines the DOM as 


A platfomm- and language-neutral interface that will allow programs and scripts to dynamicaly 
access and update the content, structure and style of documents. 22sce 


lt is an API that can be used to navigate HTML and XML documents. 


Abbreviations 


Word Wide Web Consortium 

Document Object Model 

Application Programming Interface 
HTML 

HyperText Markup Language 


@Xtensible Markup Language 


API 


XMI 


图 8-4 
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此 前 编写 的 displayAbbreviations 和 displayCitations 国 数 有 许多 共同 之 处 : 从 创建 一 个 由 
特定 元 素 (abbr 元 素 或 blockquote 元 素 ) 构成 的 节点 集合 开始 ,用 一 个 循环 去 遍历 这 个 节点 集合 
并 在 每 次 循环 里 创建 出 一 些 标记 ， 最 后 把 新 创建 的 标记 插入 到 文档 里 。 

让 我 们 沿 着 这 一 思路 再 看 一 个 例子 。 我 们 编写 一 个 函数 、 把 文档 里 能 用 到 的 所 有 快捷 键 显 示 


accesskey 属性 可 以 把 一 个 元 素 (如 链接 ) 与 键盘 上 的 某 个 特定 按键 关联 在 一 起 。 这 对 那些 不 
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能 或 不 喜欢 使 用 鼠标 来 浏览 网 页 的 人 们 很 有 用 。 对 于 有 视力 障碍 的 人 士 , 键盘 快捷 方式 肯定 会 带 
来 许多 方便 。 

一 般 来 说 ,在 适用 于 Windows 系统 的 浏览 器 里 , 快捷 键 的 用 法 是 在 键盘 上 同时 按 下 Alt 键 和 
特定 按键 ， 在 适用 于 Mac 系统 的 浏览 器 里 ， 快 捷 键 的 用 法 是 同时 按 下 Ctrl 键 和 特定 按键 。 

下 面 是 accesskey 属性 是 一 个 例子 : 


<a href="index.html” accesskey="1">Home</a> 


注意 设置 太 多 的 快捷 键 往往 会 适得其反 一 一 它们 或 许 会 与 浏览 器 内 建 的 键盘 快捷 方式 发 生 冲 
突 


支持 accesskey 属性 的 浏览 器 有 很 多 ， 但 是 否 以 及 如 何 把 快捷 键 的 分 配 情况 显示 在 页 面 上 却 
需要 由 身 为 网 页 设计 人 员 的 你 们 来 决定 。 有 许多 网 站 都 会 在 一 个 快捷 键 清单 (accessibility 
statement) 页 面 上 列 明 该 网 站 都 支持 哪些 快捷 键 。 

一 些 基 本 的 快捷 键 都 有 约定 俗 成 的 设置 办 法 ， 对 此 感 兴 趣 的 读者 可 以 浏览 
http://www.clagnut.com/blog/193/, 

口 accesskey="1" 对 应 着 一 个 “返回 到 本 网 站 主页 ”的 链接 ， 
accesskey="2" 对 应 着 一 个 “后 退 到 前 一 页 面 ” 的 链接 ， 
accesskey="4" 对 应 着 一 个 “打开 本 网 站 的 搜索 表单 /页 面 ” 的 链接 ， 
accesskey="9" 对 应 着 一 个 “本 网 站 联系 办 法 ”的 链接 ，; 
accesskey="0" 对 应 着 一 个 “查看 本 网 站 的 快捷 键 清单 ”的 链接 。 
下 面 是 一 个 网 站 导航 清单 的 例子 ， 使 用 了 快捷 键 : 


<ul id="navigation"> 
<li><a href="index.html" accesskey="1">Home</a></1i> 
《1i><a href="search.html" accesskey="4">Search</a></1i> 
<li><a href="contact.html™ accesskey="0">Contact</a></li> 
</ul> 


把 这 段 标记 添加 到 explanation.html 文档 的 <body> 开 标签 的 后 面 。 

现在 ， 如 果 把 explanation.html 文档 加 载 到 一 个 浏览 器 里 ， 你 就 会 看 到 这 份 清单 里 的 链接 ， 
但 看 不 到 任何 能 表明 这 些 链接 都 有 accesskey 属性 的 东西 。 

利用 DOM 技术 ， 可 以 动态 地 创建 一 份 快 捷 键 清单 。 下 面 是 具体 的 步骤 。 

(1) 把 文档 里 的 所 有 链接 全 部 提取 到 一 个 节点 集合 里 。 

(2) 遍历 这 个 节点 集合 里 的 所 有 链接 。 

(3) 如 果 某 个 链接 带 有 accesskey 属性 ， 就 把 它 的 值 保 存 起 来 。 

(4) 把 这 个 链接 在 浏览 器 窗口 里 的 屏 显 标 识 文 字 也 保存 起 来 。 

(5) 创建 一 个 清单 。 

(6) 为 拥有 快捷 键 的 各 个 链接 分 别 创建 一 个 列表 项 (1i 元 素 )。 

(7) 把 列表 项 添加 到 “快捷 键 清单 ”里 。 


口 
口 
口 
口 
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(8) 把 “快捷 键 清单 ”添加 到 文档 里 。 
和 前 面 的 例子 一 样 ， 按 照 以 上 步骤 编写 国 数 。 
把 这 个 函数 命名 为 displayAccessKeys 并 存 入 displayAccessKeys.js 文件 。 
这 个 函数 的 工作 原理 与 displayAbbreviations 函数 很 相似 : 先 把 ee 属性 值 和 相关 链接 
的 屏 显 标识 文本 提取 出 来 并 存 入 一 个 关联 数组 ,然后 用 一 个 for/in 循环 来 志 历 这 个 数组 以 创建 各 
个 列表 项 。 
不 再 逐 行 讲解 ， 下 面 是 最 终 完 成 的 函数 代码 清单 。 代 码 中 的 注释 语句 可 以 把 各 个 步骤 解释 


function displayAccesskeys() { 
if (!document.getElementsByTagName || !document.createElement || 
wldocument.createTextNode) return false; 
// 取得 文档 中 的 所 有 链接 
var links = document.getElementsByTagName("a"); 
// 创建 一 个 数组 ， 保 存 访问 键 
var akeys = new Array(); 
// 遍历 链接 
for (var i=0; i<links.length; i++) { 
var current link = links[i]; 
// 如 果 没 有 accesskey 属性 ， 继 续 循环 
if (!current link.getAttribute("accesskey")) continue; 
// 取得 accesskey 的 值 
Var key = current link.getAttribute("accesskey" ); 
// 取得 链接 文本 
var text = current link.lastChild.nodeValue; 
// 添加 到 数组 
akeys[key] = text; 


} 
// 创建 列表 
var list = document.createElement("ul"); 
// 遍历 访问 键 
for (key in akeys) { 
var text = akeys[key]; 
// 创建 放 到 列表 项 中 的 字符 串 
var str = key + ": "+text; 
// 创建 列表 项 
var item = document.createElement("1i"); 
var item text = document.createTextNode(str); 
item.appendChild(item text); 
// 把 列表 项 添加 到 列表 中 
list.appendChild(item); 


} 
// 创建 标题 
var header = document.createElement("h3"); 
Var header text = document.createTextNode("Accesskeys"); 
header. appendChild(header _ text); 
// 把 标题 添加 到 页 面 主体 
document. body.appendChild(header); 
// 把 列表 添加 到 页 面 主体 
document .body. appendChild(1ist); 


} 
addLoadEvent (displayAccesskeys); 


为 了 调用 displayAccessKeys.js 文件 ， 还 需要 在 explanation.html 文件 的 <head> 部 分 添加 一 组 
<script> 标 签 
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《SCTipt src="scripts/displayAccesskeys.js"></script> 
现在 ， 如 采 把 explanation.html 文档 加 载 到 一 个 浏览 器 里 ， 就 可 以 看 到 动态 创建 的 “快捷 键 
清单 ”， 如 图 8-5 所 示 。 


[Gee Explaining the Document Object Model 已 ] 
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Abbreviations 
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8.7 ”检索 和 添加 信息 


本 章 编写 了 几 个 很 有 用 的 脚本 ,你 可 以 把 这 几 个 脚本 用 到 任何 一 个 网 页 里 。 虽 然 它们 用 途 不 

， 但 基本 思路 是 相同 的 : 用 JavaScript 国 数 先 把 文档 结构 里 的 一 些 现 有 信息 提取 出 来 ， 再 把 那 
此 信息 以 一 种 清晰 和 有 意义 的 方式 重新 插入 到 文档 里 去 。 

这 些 函 数 可 以 让 网 页 变 得 更 有 条 理 、 更 容易 浏览 。 

D 把 文档 里 的 缩 略 语 显示 为 一 个 “ 缩 略 语 列表 ”。 

D 为 文档 里 引用 的 每 段 文献 节选 生成 一 个 “文献 来 源 链接 ”。 
D 把 文档 所 支持 的 快捷 键 显 示 为 一 份 “ 快 捷 键 清单 ”。 

你 可 以 根据 具体 情况 对 这 些 脚 本 做 进一步 改进 。 比 如 说 ,我 们 这 里 是 把 “文献 来 源 链接 ” 直 
接 显示 在 每 个 blockquote 元 素 的 后 面 ， 而 你 可 以 把 这 些 链接 集中 放 在 文档 末尾 的 一 个 清单 里 一 一 就 
像 脚 注 那 样 。 再 比如 说 ， 我 们 这 里 生成 了 一 份 “ 快 捷 键 清单 ”， 而 你 可 以 把 各 个 快捷 键 分 别 追 加 
在 相关 链接 的 末尾 。 

当然 可 以 利用 本 章 介绍 的 技术 去 编写 一 些 全 新 的 脚本 。 例 如 ， 可 以 为 文档 生成 一 份 目录 : 把 
文档 里 的 由 和 h2 元 素 提 取出 来 放 入 一 份 清单 ， 再 将 其 插入 到 文档 的 开头 。 甚 至 可 以 把 这 份 清单 
里 的 列表 项 增强 为 一 些 可 以 让 用 户 快速 到 达 各 有 关 标 题 的 内 部 链接 。 

只 需要 少量 DOM 方法 和 属性 ， 就 可 以 创建 这 些 有 用 的 脚本 。 如 果 你 想 通 过 DOM 脚本 去 充 
实 网 页 的 内 容 ， 制 作 一 份 结构 良好 的 标记 文档 将 是 最 重要 的 前 提 条 件 。 

在 需要 对 文档 里 的 现 有 信息 进行 检索 时 ， 以 下 DOM 方法 最 有 用 : 
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DQ getElementById 
口 getElementsByTagName 
QD getAttribute 
在 需要 把 信息 添加 到 文档 里 去 时 ， 以 下 DOM 方法 最 有 用 
DO createElement 
DD createTextNode 
DQ appendChild 
DO insertBefore 
DO setAttribute 
以 上 DOM 方法 的 组 合 可 以 让 我 们 编写 出 功能 非常 强大 的 DOM 脚本 来 。 
希望 大 家 始终 记 住 : JavaScript 脚本 只 应 该 用 来 充实 文档 的 内 容 , 要 避免 使 用 DOM 技术 来 创 
建 核心 内 容 。 
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至 此 ， 我 们 一 直 在 使 用 JavaScript 语言 和 DOM 去 维护 和 创建 标记 。 在 下 一 章 里 ， 你 将 看 到 
DOM 的 一 种 全 新 应 用 ， 它 将 展示 如 何 运 用 DOM 去 处 理 诸如 颜色 、 字 体 等 样式 信息 。DOM 技术 
不 仅 可 以 用 来 改变 网 页 的 结构 ， 还 可 以 用 来 更 新 HIML 页 面 元 素 的 CSS 样式 。 


第 9 章 


CSS-DOM 


本 章 内容 

口 style 属性 

0 如 何 检索 样式 
口 如 何 改变 样式 


在 本 章 里 , Web 文档 的 表示 层 和 行为 层 将 正面 接触 。 我 将 展示 如 何 利用 DOM 技 术 去 获取 ( 读 ) 
和 设置 ( 写 ) CSS 信息 。 
9.1 三 位 一 体 的 网 页 


我 们 在 浏览 器 里 看 到 的 网 页 其 实 是 由 以 下 三 层 信 息 构 成 的 一 个 共同 体 : 

DO 结构 层 

D 表示 层 

D 行为 导 

9.1 1 结构 层 AOAOA Example | — 


钨 从 @vrO 
网 页 的 结构 层 (structural layer) 由 HTML 

或 XHTML 之 类 的 标记 语言 负责 创建 。 标 签 | An example of a paragraph 
(tag) ， 也 就 是 那些 出 现在 尖 括 号 里 的 单词 ， 对 
网 页 内 容 的 语义 含义 做 出 了 描述 ， 例 如 ，<p> 标 
签 表达 了 这 样 一 种 语义 :“ 这 是 一 个 文本 段 。” 
(如 图 9-1 所 示 。) 但 这 些 标签 并 不 包含 任何 关于 
内 容 如 何 显示 的 信息 。 


<p>An example of a paragraph</p> 


9.1.2 ”表示 层 ee 


表示 层 (presentation layer) 由 CSS 负责 完成 。CSS 描述 页 面 内 容 应 该 如 何 呈 现 。 你 可 以 定 
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义 这 样 一 个 CSS 来 声明 :“ 文 本 段 应 该 使 用 灰色 的 Arial 字体 和 另外 几 种 scan-serif 字体 来 显示 。” 
如 图 9-2 所 示 。 
pi 


color: grey; 
font-family: "Arial", sans-serif; 


[AaAn Example 一 ， 
CM 铺 ay 他 4- Vv © © > 


An example of a paragraph 


图 9-2 
9.1.3 行为 层 


行为 层 (behavior layer) 负责 内 容 应 该 如 何 响应 事件 这 一 问题 。 这 是 JavaScript 语 言 和 DOM 
主宰 的 领域 。 例 如 ， 我 们 可 以 利用 DOM 实现 这 样 一 种 行为 :“ 当 用 户 点 击 一 个 文本 段 时 ， 显 示 
一 个 alert 对 话 框 。” 如 图 9-3 所 示 。 


var paras = document.getElementsByTagName("p"); 
for (var i=0; i<paras.length; i++) { 
paras[i].onclick = function() { 
alert("You clicked on a paragraph."); 


AAA Example 人 


3 You clicked on a paragraph. 


Eo 


Done 


图 9-3 
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网 页 的 表示 层 和 行为 层 总 是 存在 的 ， 即 使 未 明确 地 给 出 任何 具体 的 指令 也 是 如 此 。 此 时 ， 
Web 浏览 器 将 应 用 它 的 默认 样式 和 默认 事件 处 理 函 数 。 例 如 ， 浏览 器 会 在 哇 现 “文本 段 ”元 素 时 
留 出 页 边 距 ， 当 用 户 把 鼠标 指针 基 停 在 茶 个 元 素 的 上 方 时 ,， 有 些 浏 览 器 会 弹出 一 个 显示 着 该 元 素 
的 title 属性 值 的 提示 框 ， 等 等 。 


9.1.4 ”分离 


在 所 有 的 产品 设计 活动 中 , 选择 最 适用 的 工具 去 解决 问题 是 最 基本 的 原则 。 具体 到 网 页 设计 
工作 ， 这 意味 着 : 
D 使 用 (X)HTML 去 搭建 文档 的 结构 ，; 
D 使 用 CSS 去 设置 文档 的 呈现 效果 ， 
D 使 用 DOM 脚本 去 实现 文档 的 行为 。 

不 过 ， 在 这 三 种 技术 之 间 存 在 着 一 些 潜在 的 重 亚 区域， 你 也 已 见 过 这 样 的 例子 。 用 DOM 可 
以 改变 网 页 的 结构 ， 诸 如 createElement 和 appendchi1d 之 类 的 DOM 方法 允许 你 动态 地 创建 和 添 
加 标记 。 
在 CSS 上 也 有 这 种 技术 相互 重合 的 例子 ,诸如 :hover 和 :focus 之 类 的 伪 类 人 允许 你 根据 用 户 触 
发 事件 改变 元 素 的 呈现 效果 。 改 变 元 素 的 呈现 效果 当然 是 表示 层 的 “势力 范围 ”>， 但 响应 用 户 触 
发 的 事件 却 是 行为 层 的 领地 。 表 示 层 和 行为 层 的 这 种 重 又 形成 了 一 个 灰色 地 带 。 

没 错 ，CSS 正在 利用 伪 类 走 进 DOM 的 领地 ,但 DOM 也 有 反击 之 道 。 你 可 以 利用 DOM 样 
式 给 元 素 设 定 样式 。 


9.2 style 属性 


文档 中 的 每 个 元 素 都 是 一 个 对 象 , 每 个 对 象 又 有 着 各 种 各 样 的 属性 。 有 一 些 属 性 告诉 我 们 元 
素 在 节点 树 上 的 位 置信 息 。 比 如 说 ，parentNode、nextSibling、previousSibling、childNodes、 
firstChild 和 1astChild 这 些 属性 ， 就 告诉 了 我 们 文档 中 各 市 点 之 间 关 系 信息 。 

其 他 一 些 属性 (比如 nodeType 和 nodeName 属性 ) 包含 元 素 本 身 的 信息 。 比 如 说 ， 对 茶 个 元 素 
的 nodeName 属性 进行 的 查询 将 返回 一 个 诸如 “p” 之 类 的 字符 串 。 
除 此 之 外 , 文档 的 每 个 元 素 节 点 还 都 有 一 个 属性 style。style 属性 包含 着 元 素 的 样式 ,查询 
这 个 属性 将 返回 一 个 对 象 而 不 是 一 个 简单 的 字符 串 。 样 式 都 存放 在 这 个 style 对 象 的 属性 里 : 

element. style.property 

下 面 是 一 个 内 柑 样 式 的 <p> 元 素 的 例子 : 

<p id="example” style="color: grey; font-family: 'Arial',sans-serif;"> 

An example of a paragraph 

</p> 

利用 style 属性 , 你 可 以 得 到 这 个 <p> 标签 的 样式 。 

首先 ， 需要 从 文档 里 把 这 个 元 素 找 出 来 。 我 已 经 给 这 个 <p> 标 签 设置 了 一 个 独一无二 的 id 值 
example。 只 需 把 这 个 id 值 传递 给 getElementById 方法， 再 把 这 个 方法 的 返回 值 赋值 给 变量 para， 
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就 可 以 通过 para 变量 引用 这 个 了 元 素 了 ， 
var para = document.getElementById("example"); 
在 拿 到 这 个 元 素 的 样式 之 前 ， 我 想 先 向 大 家 证 明 一 下 style 属性 确实 是 一 个 对 象 。 这 可 以 利 
用 关键 字 typeof 来 验证 。 下 面 ， 我 们 来 对 比 一 下 style 属性 与 nodeName 属性 的 typeof 结果 。 
把 下 面 这 些 XHTML 代码 写 入 文件 example.html， 然 后 把 这 个 文件 加 载 到 浏览 器 里 : 


<!IDOCTYPE html> 

<html> 

<head> 
<meta charset="utf-8” /> 
<title>Example</title> 
<script> 

window.onload = function() { 
var para = document.getElementById("example"); 
alert(typeof para.nodeName); 
alert(typeof para.style); 


</script> 
</head> 
<body> 
<p id="example” style="color: grey; font-family: ‘Arial',sans-serif;"> 
An example of a paragraph 
</p> 
</body> 
</html> 


第 一 条 alert 语句 将 返回 字符 串 “string”， 因 为 nodeName 属性 是 一 个 字符 串 (如 图 9-4 所 示 )。 
第 二 条 alert 语句 将 返回 字符 串 “object”， 因 为 style 属性 是 一 个 对 象 (如 图 9-5 所 示 ) 。 


~ 天 上 站 


Example -3 


3 string 3 object 
) | 


AA Example CE3 


Done II Done 


图 9-4 图 9-5 


也 就 是 说 ,不 仅 文 档 里 的 每 个 元 素 都 是 一 个 对 象 ， 每 个 元 素 都 有 一 个 style 属性 ， 它 们 也 是 
一 个 对 象 。 


9.2.1 获取 样式 
你 能 够 得 到 para 变量 所 代表 的 <p> 标 签 的 样式 。 为 了 查 出 某 个 元 素 在 浏览 器 里 的 显示 颜色 ， 
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我 们 需要 使 用 style 对 象 的 color 属性 : 
element. style.color 
下 面 这 条 alert 语句 告诉 我 们 style 对 象 (这 个 对 象 是 para 元 素 的 属性 ) 的 color 属性 : 


alert("The color is ”+ para.style.color); 


这 个 元 素 的 style 属性 的 color 属性 是 “grey”( 如 图 9-6 所 示 )。 


区 LX| 3 The color is grey 


CE— ox 3 


Done 


色 9-6 


刚才 的 代码 中 还 设置 了 <p> 元 素 的 另 一 个 CSS 属性 font-family。 这 个 属性 的 获取 方式 与 color 
属性 略 有 不 同 。 你 不 能 简单 地 查询 style 对 象 的 font-family， 因 为 “font” 和 “family” 之 间 的 连 
字符 与 JavaScript 语 言 中 的 减法 操作 符 相同 ，JavaScript 会 把 它 解 释 为 减 号 。 如 果 像 下 面 这 样 去 访 
问 名 为 font-family 的 属性 ， 就 会 收 到 一 条 出 错 信 息 

element ,style.font-family 

JavaScript 将 把 减 号 前 面 的 内 容 解释 为 “元 素 的 style 属性 的 font 属性 ”， 把 减 号 后 面 的 内 容 
解释 为 一 个 名 为 family 的 变量 ， 把 整个 表达 式 解 释 为 一 个 减法 运算 。 这 完全 韦 背 了 我 的 本 意 ! 

减 号 和 加 号 之 类 的 操作 符 是 保留 字符 , 不 允许 用 在 函数 或 变量 的 名 字 里 。 这 同时 意味 着 它们 

不 能 用 在 方法 或 属性 的 名 字 里 ( 别 忘 了 , 方法 和 属性 其 实 是 关联 在 某 个 对 象 上 的 函数 和 变量 )。 

当 你 需要 引用 一 个 中 间 带 减 号 的 CSS 属性 时 ， DOM 要 求 你 用 驼峰 命名 法 。CSS 属性 
font-family 变 为 DOM 属性 fontFamily: 


element. style.fontFamily 


为 了 查看 para 元 素 的 style 属性 的 fontFamily 属性 ， 在 example.html 文件 里 增加 一 条 alert 
语句 : 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8” /> 
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<title>Example</title> 
<script> 
window.onload = function() { 
var para = document.getElementById("example" ); 
alert("The font family is " + para.style.fontFamily); 


</script> 
</head> 
<body> 
<p id="example” style="color: grey; font-family: 'Arial',sans-serif;"> 
An example of a paragraph 
</p> 
</body> 
</html> 


在 浏览 器 里 重新 加 载 example.html 文件 将 能 看 到 如 图 9-7 所 示 的 结果 。 


= 9 | 3 The font family is 'Arial',sans-serif Ping/t 
x | 有 


( OK ) 


图 9-7 


DOM 属性 fontFamily 的 值 与 CSS 属性 font-family 的 值 是 一 样 的 。 具 体 到 这 个 例子 ， 它 是 : 

"Arial' ,sans-serif 

不 管 CSS 样式 属性 的 名 字 里 有 多 少 个 连 字 符 ，DOM 一 律 采 用 驼峰 命名 法 来 表示 它们 。CSS 
属性 background-color 对 应 着 DOM 属性 backgroundColor ，CSS 属性 font-weight 对 应 着 DOM 属 
性 fontWeight，DOM 属性 marginTopWidth 对 应 着 CSS 属性 margin-top-width。 

DOM 在 表示 样式 属性 时 采用 的 单位 并 不 总 是 与 它们 在 CSS 样式 表 里 的 设置 相同 。 

在 示例 的 <p> 元 素 里 ，CSS 属性 color 的 设置 值 是 单词 “grey”， 用 JavaScript 代码 检索 出 来 的 
DOM color 属性 的 值 也 是 “grey”。 现 在 ， 把 这 个 color 属性 修改 为 十 六 进 制 值 #999999. 

<p id="example” style="color: #999999; font-family: 'Arial',sans-serif"> 

再 在 JavaScript 代码 里 加 上 一 条 alert 语句 输出 DOM 里 的 color 属性 : 

alert("The color is " + para.style.color); 

在 某 些 浏览 器 里 ，color 属性 以 RGB ( 红 ， 绿 ， 蓝 ) 格式 的 颜色 值 (153,153,153) 返 回 ， 如 图 
9-8 所 示 。 


大 三 


外 
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名 & 


Done 


3 The color is rgb(153, 153, 153) 


OK ) 


名 


9-8 


还 好 , 这 类 例外 情况 并 不 多 。 绝 大 部 分 样式 属性 的 返 


回 值 与 它们 的 设置 值 都 采用 同样 的 计量 


单位 。 如 果 我 们 在 设置 CSS font-size 属性 时 以 em 为 单位 , 相应 的 DOM fontSize 属性 也 将 以 em 


为 单位 : 

<!DOCTYPE html> 

<htm] lang="en"> 

<head> 
<meta charset="utf-8” /> 
<title>Example</title> 
<script> 

window.onload = function() { 
var para = document.getElementById("example"); 
alert("The font size is ”+ para.style.fontSize); 


</script> 
</head> 
<body> 


<p id="example" style="color: grey; font-family: 'Arial',sans-serif; 


= font-size: 1em; "> 
An example of a paragraph 


</p> 
</body> 
</html> 
如 图 9-9 所 示 ，DOM fontsize 属性 的 确 也 是 以 em 为 单位 的 。 


| 


3 The font size is lem 


Done 


C—ex— 3 
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如 果 CSS font-size 属性 的 值 是 lem，DOM fontSize 属性 的 返回 值 就 将 是 lem。 如 果 CSS 
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font-size 属性 的 值 是 12px，DOM fontSize 属性 的 返回 值 就 将 是 12px。 

使 用 CSS 速记 属性 , 你 可 以 把 多 个 样式 组 合 在 一 起 写成 一 行 。 比 如 说 , 如 果 声 明了 font: 12px 
'Arial', sans-serif,CSS font-size 属性 将 被 设置 为 12px,CSS font-family 属性 将 被 设置 为 'Arial'， 
sans-serif., 


<p id="example" style="color: grey; font: 12px 'Arial',sans-serif;"> 
DOM 能 够 解析 像 font 这 样 的 速记 属性 。 如 果 查 询 fontsize 属性 ， 将 得 到 一 个 12px 的 值 : 
alert("The font size is ”+ para.style.fontSize); 


如 图 9-10 所 示 ，DOM fontSize 属性 的 确 也 是 以 px 为 单位 的 。 


9 & EE The font size is 12px 


-ox— 3 


Done 


WN 
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内 藤 样 式 
通过 style 属性 获取 样式 有 很 大 的 局 限 性 。 
style 属性 只 能 返回 内 磐 样 式 。 换 名 话说， 只 有 把 CSS style 属性 插入 到 标记 里 ， 才 可 以 用 
DOM style 属性 去 查询 那些 信息 : 

<p id="example" style="color: grey; font: 12px 'Arial',sans-serif;"> 

这 可 不 是 使 用 样式 的 好 办 法 一 一 表现 信息 与 结构 混杂 在 一 起 了 。 更 好 的 办 法 是 用 一 个 外 部 样 
式 表 去 设置 样式 : 

p#example { 


color: grey; 
font: 12px 'Arial', sans-serif; 


把 上 面 这 段 CSS 代码 存 和 文件 styles.css。 然后， 从 example.html 文件 里 把 内 上 租 在 HTML 代 
码 里 的 样式 删 掉 ， 只 保留 以 下 内 容 : 

<p id="example"> 

An example of a paragraph 

</p> 

在 example.html 文件 的 开头 部 分 加 上 一 个 1ink 元 素 并 让 它 指 向 styles.css 文件 : 


<link rel="stylesheet" media="screen" href="styles/styles.css" /> 
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样式 还 像 以 前 那样 作用 到 了 HTML 内 容 上 ,但 与 使 用 style 属性 不 同 ， 来自 外 部 文件 
styles.css 的 样式 已 经 不 能 再 用 DOM style 属性 检索 出 来 了 。 
alert("The font size is ”+ para.style.fontSize); 


DOM style 属性 不 能 用 来 检索 在 外 部 CSS 文件 里 声明 的 样式 ， 如 图 9-11 所 示 。 


Ky ka 3 The font size is 


(= 
图 9-11 
如 果 把 样式 添加 在 example.html 文件 <head> 部 分 的 <style> 标 签 里 ， 你 将 看 到 相同 的 结果 : 


<style> 
piexample { 
Color: grey; 
font: 12px 'Arial', sans-serif; 


</style> 
DOM style 属性 提取 不 到 如 此 设置 的 样式 。 
在 外 部 样式 表 里 声明 的 样式 不 会 进入 style 对 象 ， 在 文档 的 <head> 部 分 里 声明 的 样式 也 是 如 


此 。 


style 对 象 只 包含 在 HTML 代码 里 用 style 属性 声明 的 样式 。 但 这 几乎 没有 实用 价值 ， 因 为 
样式 应 该 与 标记 分 离开 来 。 

现在 ,你 或 许 会 认为 用 DOM 去 处 理 CSS 样式 这 无 意义 ,但 这 里 还 有 另 一 种 情况 可 以 让 DOM 
style 对 象 能 够 正确 地 反射 出 我 们 设置 的 样式 。 你 用 DOM 设置 的 样式 , 就 可 以 用 DOM 再 把 它们 
9.2.2 设置 样式 

许多 DOM 属性 是 只 读 的 我 们 只 能 用 它们 来 获取 信息 ,但 不 能 用 它们 来 设置 或 更 新 信息 。 
类 似 previousSibling、nextSibling、parentNode、firstChild 和 1astChild 之 类 的 属性 ， 它们 在 你 
收集 一 个 元 素 在 节点 树 上 的 位 置信 息 时 可 以 帮 上 大 忙 ， 但 它们 不 能 用 来 更 新 信息 。 

几 事 无 绝对 ，style 对 象 的 各 个 属性 就 都 是 可 读 写 的 。 我 们 不 仅 可 以 通过 某 个 元 素 的 style 
属性 去 获取 样式 ， 还 可 以 通过 它 去 更 新 样式 。 你 可 以 用 赋值 操作 来 更 新 样式 : 


element. style.property = Value 
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style 对 象 的 属性 值 永远 是 一 个 字符 串 。 在 example.html 文件 里 写 一 些 JavaScript 代码 覆盖 那 
些 内 和 瞬 在 标记 里 的 CSS 代码 。 比 如 说 ， 把 para 元 素 对 象 的 color 属性 设置 为 "black": 


<!DOCTYPE html> 

<html] lang="en"> 

<head> 
<meta charset="utf-8" /> 
<title>Examplex</title> 
<script> 

window.onload = function() { 
var para = document.getElementById("example"); 
para.style.color = "black"; 


</script> 
</head> 
<body> 
<p id="example” style="color: grey; font-family: ‘Arial',sans-serif;"> 
An example of a paragraph 
</p> 
</body> 
</html> 


color 属性 已 经 被 变 成 了 "black"， 如 图 9-12 所 示 。 

style 对象 的 属性 的 值 必须 放 在 引号 里 ， 单 引号 或 双 引 号 均 可 : 
para. style.color = 'black'; 

如 果 忘 了 使 用 引号 ，JavaScript 会 把 等 号 右边 的 值 解释 为 一 个 变量 : 


a.style.color = black; 


以 


pa 

如 果 前 面 并 未 定义 过 变量 black， 则 上 面 这 行 代码 将 无 法 工作 。 

用 赋值 操作 符 你 可 以 设置 任何 一 种 样式 属性 ， 诸 如 font 之 类 的 速记 属性 也 不 例外 : 

para.style.font = "2em 'Times',serif"; 

上 面 这 条 语句 将 把 fontSize 属性 设置 为 2em， 把 fontFamily 属性 设置 为 'Times'，serif， 如 
图 9-13 所 示 。 


乒 司 F 司 
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An example of a paragraph 


An example of a 
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Done Done 


图 9-12 图 9-13 


通过 JavaScript 代码 设置 样式 并 不 难 , 我 也 给 出 了 一 些 具体 例子 。 不 过 或 许 应 该 先 问 问 自 己 : 
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为 什么 要 这 么 做 ? 
9.3 何 时 该 用 DOM 脚本 设置 样式 


你 已 经 看 到 ， 用 DOM 设置 样式 是 多 么 容易 ， 但 你 能 做 什么 事 并 不 意味 着 你 应 该 做 什么 事 。 
在 绝 大 多 数 场合 , 还 是 应 该 使 用 CSS 去 声明 样式 。 就 像 你 不 应 该 利用 DOM 去 创建 重要 的 内 容 那 
样 ， 你 也 不 应 该 利用 DOM 为 文档 设置 重要 的 样式 。 

不 过 ， 在 使 用 CSS 不 方便 的 场合 ， 还 是 可 以 利用 DOM 对 文档 的 样式 做 一 些小 的 增强 。 


9.3.1 根据 元 素 在 节点 树 里 的 位 置 来 设置 样式 


通过 CSS 声明 样式 的 具体 做 法 主要 有 三 种 。 第 一 种 是 为 标签 元 素 (比如 p 元 素 ) 统一 地 声明 
样式 ， 如 下 所 示 : 


{ 
font-size: 1em; 


二 种 是 为 有 特定 class 属性 的 所 有 元 素 统一 声明 样式 ， 如 下 所 示 : 


.fineprint { 
font-size: .8em; 


第 三 种 是 为 有 独一无二 的 id 属性 的 元 素 单独 声明 样式 ， 如 下 所 示 : 


#intro { 
font-size: 1.2em; 


也 可 以 为 有 类 似 属 性 的 多 个 元 素 声明 样式 ， 如 下 所 示 : 


input [type*=" ‘text"] { 
font-size:1.2em; 


在 现代 浏览 器 中 ， 甚 至 可 以 根据 元 素 的 位 置 声明 样式 : 


p:first-of-type { 
font-size:2em; 
font-weight:bold; 


CSS2 引入 了 很 多 与 位 置 相 关 的 选择 器 ， 例 如 :first-child 和 :1ast-chil1d， 而 CSS3 则 定义 了 
诸如 :nth-child() 和 :nth-of-type() 之 类 的 位 置 选择 器 。 尽 管 如 此 ， 在 文档 的 节点 树 中 ， 为 特定 位 
置 的 某 个 元 素 应 用 样式 仍旧 不 是 件 容 易 的 事 。 例 如 ， 在 CSS3 中 ， 你 可 以 使 用 hl ~ * 选 择 器 为 所 
有 hl 元 素 的 下 一 个 同辈 元 素 声 明 样式 。 问 题 是 ， 有 那么 多 的 浏览 器 根本 不 支持 CSS3 的 这 些 可 爱 
的 位 置 选 择 器 。 

现在 ，CSS 还 无 法 根据 元 素 之 间 的 相对 位 置 关 系 找 出 某 个 特定 的 元 素 ,但 这 对 DOM 来 说 却 
不 是 什么 难题 。 我 们 可 以 利用 DOM 轻而易举 地 找 出 文档 中 的 所 有 hl 元素, 然后 再 同样 轻而易举 
地 找 出 紧 跟 在 每 个 hl 元 素 后 面 的 那个 元 素 ， 并 把 样式 添加 给 它 。 
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首先 ， 用 getElementsByTagName 方法 把 所 有 的 nl 元 素 找 出 来 : 

var headers = document.getElementsByTagName("h1"); 

然后 ， 遍 历 这 个 节点 集合 里 所 有 元 素 : 

for (var i=0; i<headers.length; i++) { 

文档 中 的 下 一 个 节点 可 以 用 nextSibling 属性 查找 出 来 : 

headers[il].nextSibling 

请 注意 ， 这 里 真正 需要 的 不 是 “下 一 个 市 点 ”， 而 是 “下 一 个 元 素 闻 点 ”"。 下 面 这 个 getNext- 
Element 函数 可 以 让 我 们 轻松 完成 这 一 任务 : 

function getNextElement(node) { 


if(node.nodeType == 1) { 
return node; 


上 


} 
if (node.nextSibling) { 
return getNextElement(node.nextSibling); 


return null; 


} 


把 当前 hl 元素 ( 即 headers[i]) 的 nextSibling 节点 作为 参数 传递 给 getNextElement 函数 ,并 
把 这 个 函数 调用 的 返回 值 赋 值 给 elem 变量 : 


var elem = et 


oh = "bold"; 
elem.style.fontSize = "1.2em"; 


最 后 ， 把 以 上 代码 封装 到 函数 styleHeaderSiblings 中 ， 别 忘 了 安排 一 些 测 试 去 检查 广 览 器 能 
否 理 解 我 们 在 这 个 函数 里 用 到 的 DOM 方法 : 


function styleHeaderSiblings() { 
if (!document.getElementsByTagName) return false; 
var headers = document.getElementsByTagName("h1"); 
var elem; 
for (var i=0; i<headers.length; i++) { 
elem = getNextElement(headers[il].nextSibling); 


elem.style.fontweight = "bold"; 
elem.style.fontSize = "1.2em"; 


function getNextElement(node) { 
if(node.nodeType == 1) { 
return node; 


} 
if (node.nextSibling) { 
return getNextElement(node.nextSibling); 


return null; 


} 
你 可 以 用 window.onload 事件 调用 这 个 函数 : 
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window.onload = styleHeaderSiblings; 


但 更 好 的 做 法 是 用 addLoadEvent 国 数 ， 这样 你 就 能 很 方便 地 把 更 多 的 函数 绑 定 到 这 个 事件 : 


addLoadEvent(styleHeaderSiblings); 


下 面 是 addLoadEvent 函数 的 代码 清单 ， 你 可 以 把 它 保 存 到 一 个 外 部 文件 : 


function addLoadEvent(func) { 
var oldonload = window.onload; 
if (typeof window.onload != ‘function’) { 
window.onload = func; 
} else { 
window.onload = function() { 
oldonload(); 
func(); 


} 
} 


为 了 看 到 styleHeaderSiblings 函数 的 使 用 效果 ， 写 一 个 HTML 文档 ， 并 在 里 面 添加 一 些 一 
级 标题 ( 即 nl 元 素 ) : 


<!DOCTYPE html> 
<html] lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Man bites dog</title> 
</head> 
<body> 
<h1>Hold the front page</h1> 
<p>This first paragraph leads you in.</p> 
<p>Now you get the nitty-gritty of the story.</p> 
<p>The most important information is delivered first.</p> 
<h1>Extra! Extra!l</h1> 
<p>Further developments are unfolding.</p> 
<p>You can read all about it here.</p> 
</body> 
</html> 


把 这 个 文档 保存 为 story.htm] 文件 。 图 9-14 是 它 目 前 在 浏览 器 里 的 样子 。 

接 下 来 , 创建 文件 夹 scripts 来 存放 JavaScript 脚本 文件 。 把 addLoadEvent 函数 存 为 一 个 名 为 
addLoadEvent .js 的 文件 ， 并 把 它 放 到 这 个 文件 夹 ， 把 styleHeaderSiblings 函数 存 为 一 个 名 为 
styleHeaderSiblings.js 的 文件 ， 也 把 它 放 到 此 文件 夹 。 

为 了 调用 这 两 个 JavaScript 脚本 文件 ， 还 需要 在 story.html 文件 的 </body> 标 签 之 前 插入 一 些 
<Script> 标 签 : 


<script src="scripts/addLoadEvent.js"></script> 
<script src="scripts/styleHeaderSiblings.js"></script> 


现在 , 把 story .html 文件 加 载 到 Web 浏览 器 中 ,你 就 可 以 看 到 DOM 脚本 生成 的 样式 效果 了 。 
动态 设置 的 样式 将 作用 于 紧 跟 在 各 个 nl 元 素 后 面 的 那个 元 素 (如 图 9-15 所 示 )。 

从 理论 上 讲 ， 这 类 样式 还 是 应 该 用 CSS 来 设置 ， 但 在 实践 中 ， 用 CSS 来 设置 这 类 样式 的 难 
度 往往 会 很 大 ,具体 到 这 个 例子 ,其 实 只 需 给 紧 跟 在 hl 元素 后 面 的 每 个 元 素 添加 一 个 class 属性 ， 
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就 可 以 用 CSS 来 获得 同样 的 效果 。 但 如 有 果 文 档 的 内 容 需 要 定期 编辑 和 刷新 , 添加 class 属性 的 工 
作 很 快 就 会 变 成 一 种 负担 。 不 仅 如 此 ， 如 果 文 档 的 内 容 需 要 通过 一 个 CMS (内 容 管 理 系 统 ) 来 
处 理 ， 给 文档 内 容 的 个 别 部 分 添加 class 属性 或 其 他 样式 的 做 法 甚至 是 不 允许 的 。 


[eee Man bites dog (= [re (S&S) Man bites dog S| 

Eu A [a © + 
E23 (ni © EE 会 "|€ 

Hold the front page Hold the front page 

This first paragraph leads you in. This first paragraph leads you in. 

Now you get the nitty-gritty of the story. Now you get the nitty-gritty of the story. 

The most important information is delivered first. The most important information is delivered first. 

Extra! Extra! Extra! Extra! 

Further developments are unfolding. Further developments are unfolding. 

You can read all about it here. You can read all about it here. 

Done Done 

图 9-14 图 9-15 


9.3.2 ”根据 某 种 条 件 反复 设置 某 种 样式 

不 妨 假设 我 有 一 份 由 一 些 日 期 和 地 名 构成 的 清单 , 比如 一 份 乐队 演出 日 程 表 或 一 份 旅行 日 程 
表 。 我 们 不 必 关心 它 到 底 是 什么 ， 只 要 其 中 的 日 期 和 地 点 有 直接 对 应 的 关系 就 行 了 。 对 ， 就 是 表 
格 型 数据 ， 把 表格 型 数据 转换 为 HTML 内 容 的 理想 标签 当然 是 <table>。 


注意 在 用 CSS 安排 你 的 内 容 时 ， 千 万 不 要 人 云 亦 云 地 认为 表格 都 是 不 好 的 。 虽 然 利 用 表格 来 
做 页 面 布 局 不 是 好 主意 ， 但 利用 表格 来 显示 表格 数据 却 是 理 所 应 当 的 。 


下 面 是 为 这 个 表格 编写 的 标记 : 
<!DOCTYPE html> 
<html] lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Cities</title> 
</head> 
<body> 
<table> 
<caption>Itinerary</caption> 
<thead> 
<tr> 
<th>When</th> 
<th>Where</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
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<td>June 9th</td> 
<td>Portland, <abbr title="Oregon">OR</abbr></td> 
</tr> 
<tr> 
<td>June 10th</td> 
<td>Seattle, <abbr title="Washington">WA</abbr></td> 
</tr> 
<tr> 
<td>June 12thx/td> 
<td>Sacramento, <abbr title="California">CA</abbr></td> 
</tr> 
«</tbody> 
</table> 
</body> 
</html> 


把 这 些 代 码 保存 为 itinerary.html 文件 。 如 果 现 在 就 把 这 个 文件 加 载 到 一 个 Web 浏览 器 里 ， 
你 将 看 到 一 个 包含 全 部 的 信息 但 呆 灌 模糊 的 表格 ， 如 图 9-16 所 示 。 


Fa A A > | 


Ttinerary 
When Where 
June 9th Portland. OR 
June 10th Seattle 
June 12th Sacran 


Done 


图 9-16 


编写 一 个 CSS 样式 表 ， 让 其 中 的 数据 可 读 性 更 好 : 


body { 
font-family: "Helvetica","Arial",sans-serif; 
background-color: #fff; 
color: #000; 


| 
table { 

margin: auto; 

border: 1px solid #699; 
} 


caption { 
margin: auto; 
padding: .2em; 
font-size: 1.2em; 
font-weight: bold; 

} 

th { 
font-weight: normal; 
font-style: italic; 
text-align: left; 
border: 1px dotted #699; 
background-color: #9cc; 
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color: #000; 
th,td { 
width: 10em; 
padding: .5em; 
把 这 个 CSS 样式 表 保存 为 format .css 文件 并 将 其 放 入 文件 夹 styles 里 。 在 itinerary.html 
文档 的 <head> 部 分 增加 一 个 <1ink> 标 签 来 引用 这 个 CSS 文件 : 
<link rel="stylesheet” media="screen" href="styles/format,css" /> 


在 Web 浏览 器 里 刷新 itinerary.html 文件 就 可 以 看 到 这 个 CSS 的 效果 ， 如 图 9-17 所 示 。 


Cities 2 
£1 A 0 3| 
入 A vi 
ltinerary 
When Where 
June 9th Portland, OR 
June 10th Seattle, WA 
June 12th Sacramento, CA 
Done 
图 9-17 


让 表格 里 的 行 更 可 读 的 常用 技巧 是 交替 改变 它们 的 背景 色 ， 从 而 形成 斑马 线 效果 ， 使 相 邻 
的 两 行 痉 渭 分 明 。 通 过 分 别 设置 奇数 行 和 偶数 行 样式 的 办 法 可 实现 这 种 效果 。 如 果 浏 览 器 支持 
CSS 3， 那 就 很 简单 ， 只 需要 如 下 两 行 样式 : 


tr:nth-child(odd) { background-color:#ffc; } 
tr:nth-child(even) { background-color:#fff; } 


如 果 :nth-child() 不 可 用 ,要 获取 同样 的 效果 就 只 好 采用 另外 的 技术 。 具 体 到 itinerary.html 
文档 这 个 例子 ， 只 需 为 表格 中 的 每 个 奇数 行 ( 或 每 个 偶数 行 ) 设置 一 个 class 属性 即 可 。 不 过 ， 
这 个 方法 不 够 方便 ， 尤 其 是 对 大 表格 来 说 更 是 如 此 : 如 果 你 以 后 要 在 这 个 表格 的 中 间 插 入 或 删 
除 一 行 ， 就 不 得 不 痛苦 地 手动 更 新 大 量 的 class 属性 。 

JavaScript 特别 擅长 处 理 重复 性 任务 。 用 一 个 while 或 for 循环 就 可 以 轻松 地 遍历 一 个 很 长 的 


列表 。 
可 以 编写 一 个 函数 来 为 表格 添加 斑马 线 效果 ， 只 要 隔行 设置 样式 就 行 了 。 
(1) 把 文档 里 的 所 有 table 元 素 找 出 来 。 

(2) 对 每 个 table 元 素 ， 创 建 0dd 变量 并 把 它 初始 化 为 false。 

(3) 遍历 这 个 表格 里 的 所 有 数据 行 。 

(4) 如 果 变 量 odd 的 值 是 true， 设 置 样式 并 把 odd 变量 修改 为 false。 
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(5) 如 果 变 量 odd 的 值 是 false， 不 设置 样式 ， 但 把 odd 变量 修改 为 true。 
我 为 这 个 函数 命名 为 StripeTables。 这 个 国 数 不 需要 参数 , 所 以 函数 名 后 面 的 圆 括号 是 空 的 。 
别 忘 了 在 这 个 函数 的 开头 部 分 安排 一 些 测 试 ,检查 浏览 器 是 否 支持 函数 中 用 到 的 那些 DOM 方法 : 


function stripeTables() { 

if (!document .getElementsByTagName) return false; 
var tables = document.getElementsByTagName("table"); 
Var odd, rows; 
for (var i=0; i<tables.length; i++) { 

odd = false; 

rows = tables[i].getElementsByTagName("tr"); 

for (var j=0; jx<rows.length; j++) { 

if (odd == true) { 
rows[j].style.backgroundColor = "#ffc"; 


odd = false; 
} else { 
odd = true; 


} 
} 
} 
这 个 函数 应 该 在 页 面 加 载 时 执行 。 用 addLoadEvent 函数 来 做 这 件 事 再 合适 不 
addLoadEvent(stripeTables); 
把 以 上 JavaScript 代码 保存 为 文件 stripeTables.js， 再 将 其 和 addLoadEvent .js 文件 都 放 到 文 


过 : 


件 夹 scripts 里 去 。 
在 itinerary.html 文档 的 </body> 标 签 之 前 ， 增 加 两 个 <script> 标 签 来 调用 这 两 个 JavaScript 
脚本 文件 : 


<script src="scripts/addLoadEvent.js"></script> 
«<script src="scripts/stripeTables.js"></script> 


把 放 inerary.html 文件 加 载 到 一 个 Web 浏览 器 里 , 就 可 以 看 到 表格 里 的 偶数 行 都 有 了 一 个 新 


的 背景 颜色 ， 如 图 9-18 所 示 。 


FE 
) Citie 一 


仿 因 名 ee 
ltinerary 
When Where 
June 9th Portland, OR 
June 10th Seattle, WA 
June 12th Sacramento, CA 
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很 凑巧 ， 上 一 章 的 displayAbbreviations 国 数 也 适用 于 这 个 文档 。 把 displayAbbreviations.js 


文件 也 放 到 scripts 文件 夹 里 , 并 在 itinerary.html 文档 再 增加 一 个 <script> 标 签 引用 它 。 在 Web 
浏览 器 里 刷新 这 个 页 面 可 以 看 到 动态 生成 的 “ 缩 略 语 列表 ”， 如 图 9-19 所 示 。 
[e 办 AO Cities 品 | 
6A ee 
ltinerary 
When Where 
June 9th Portland, OR 
June 10th Seattle, WA 
June 12th Sacramento, CA 
Abbreviations 
OR 
Oregon 
WA 
Washington 
CA 
California 
Done 
到 9-19 


9.3.3 ”响应 事件 


只 要 有 可 能 ， 最 好 选用 CSS 为 文档 设置 样式 。 话 虽 这 样 说 ， 你 刚才 也 看 到 一 些 CSS 不 能 处 
理 或 是 难以 部 署 的 情况 。 在 这 类 CSS 力不从心 的 场合 ，DOM 可 以 帮 上 大 忙 。 

何 时 应 该 使 用 CSS 来 设置 样式 , 何 时 应 该 使 用 DOM 来 设置 样式 并 不 总 是 那么 容易 决定 。 如 
果 问 题 涉及 需要 根据 某 个 事件 来 改变 样式 ， 就 更 难 做 出 决定 了 。 

CSS 提供 的 :hover 等 伪 class 属性 允许 我 们 根据 HTML 元 素 的 状态 来 改变 样式 。DOM 也 可 
以 通过 onmouseover 等 事件 对 HTML 元 素 的 状态 变化 做 出 响应 。 很 难 判 断 何 时 应 该 使 用 :hover 属 
性 、 何 时 应 该 使 用 onmouseover 事件 。 

最 简单 的 答案 是 选择 最 容易 实现 的 办 法 。 比 如 说 ,如 果 只 是 想 让 链接 在 鼠标 指针 莽 停 在 其 上 
时 改变 颜色 ， 就 应 该 选用 CSS: 


a:hover { 
color: #c60; 


伪 类 :hover 已 经 得 到 了 绝 大 多 数 浏览 器 的 支持 一 一 至 少 在 它 被 用 来 改变 链接 的 样式 时 是 如 
此 。 但 如 果 还 想 利 用 这 个 伪 类 在 鼠标 指针 划 停 在 其 他 元 素 上 时 改变 样式 , 支持 这 种 用 法 的 浏览 器 
就 没有 那么 多 了 。 
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仍 以 记 inerary.html 文档 中 的 表格 为 例 。 如 果 想 让 某 行 在 鼠标 指针 大 停 其 上 时 甚 文本 变 为 粗 
体 ， 可 以 使 用 CSS 


tr:hover { 
font-weight: bold; 


从 理论 上 讲 ， 鼠 标 指针 悬 停 在 表格 的 哪 一 行 ， 哪 一 行 的 文本 就 应 该 加 黑 加 粗 ， 但 在 实践 中 ， 
这 种 效果 只 能 在 一 部 分 浏览 器 里 看 到 。 

在 这 样 的 场合 ，DOM 却 能 够 得 到 公平 对 待 。 绝 大 多 数 的 现代 浏览 器 ， 虽 然 对 CSS 伪 类 的 支 
持 很 不 完整 , 但 对 DOM 却 都 有 着 良好 的 支持 。 在 浏览 器 们 对 CSS 的 支持 进一步 完善 之 前 ,在 事 
件 发 生 时 用 DOM 改变 HTML 元 素 的 样式 更 切合 实际 。 

下 面 这 个 highlightRows 函数 将 在 鼠标 指针 莫 停 在 某 个 表格 行 的 上 方 时 ， 把 该 行文 本 加 某 加 
粗 : 

function highlightRows() { 

if(!document.getElementsByTagName) return false; 

var rows = document.getElementsByTagName("tr"); 

for (var i=0; i<rows.length; it+) { 


rows[i].onmouseover = function() { 
this.style.fontWeight = "bold"; 


rows[i].onmouseout = function() { 
this.style.fontWeight = "normal"; 


} 
} 
addLoadEvent (highlightRows); 


把 这 个 函数 存 入 文件 highlightRows.js 并 把 它 ”[555 二 一 
放 入 Scripts 文件 夹 ， 然 后 在 itinerary.html 文档 的 念 Te 


</body> 标 签 之 前 增加 一 个 如 下 所 示 的 <script> 标 签 : ltinerary 
When Where 


本 June 9th Portland, OR 
在 Web 浏览 器 里 刷新 itinerary.html 文档 。 现 une 10m Pa 


在 ， 当 你 把 鼠标 指针 世 停 在 某 个 表格 行 的 上 方 时 ， June 12th Sacramento, CA 
这 个 表格 行 里 的 文本 将 加 黑 加 粗 ， 如 图 9-20 所 示 。 
在 这 一 类 场合 ， 需 要 决定 是 采用 纯粹 的 CSS 来 |。 
解决 ， 还 是 利用 DOM 来 设置 样式 。 你 需要 考虑 以 ”| wa “0" 


> 
© 


<script src="scripts/highlightRows.js"></script> 


Abbreviations 


Washington 
下 因素 : 2 California 
OD 这 个 问题 最 简单 的 解决 方案 是 什么 ; 
D 哪 种 解决 方案 会 得 到 更 多 浏览 器 的 支持 。 


要 做 出 明智 的 抉择 ， 就 必须 对 CSS 和 DOM 技 
术 都 有 足够 深入 的 了 解 。 如 果 你 手 里 只 有 郴 头 ， 那 
么 你 看 到 的 任何 东西 都 像 钉 子 。 如 果 你 只 喜欢 使 用 CSS， 你 十 有 八 九 会 选择 一 个 CSS 解决 方案 ， 
而 不 考虑 JavaScript 解决 方案 的 效果 会 不 会 更 好 。 反 之 ， 如 果 你 只 懂得 写 DOM 脚本 ， 你 往往 会 


图 9-20 
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立刻 动手 编写 JavaScript 函数 ， 而 不 去 考虑 用 CSS 来 解决 问题 会 不 会 更 简明 快捷 。 

如 果 想 改变 某 个 元 素 的 呈现 效果 ， 使 用 CSS， 如 果 想 改变 某 个 元 素 的 行为 ， 使 用 DOM;， 如 
果 你 想 根据 某 个 元 素 的 行为 去 改变 它 的 呈现 效果 ,请 运用 你 的 智慧 , 在 这 个 问题 上 没有 放 之 四 海 
而 篆 准 的 答案 。 


9.4 className 属性 


在 本 章 前 面 的 例子 里 ， 我 们 一 直 在 使 用 DOM 直接 设置 或 修改 样式 。 这 种 做 法 让 “行为 层 ” 
于“ 表示 层 ” 的 活 ， 并 不 是 理想 的 工作 方式 。 如 果 你 改变 了 主意 ， 想 换 换 那些 由 DOM 脚本 设 
置 的 样式 ， 就 不 得 不 埋头 于 JavaScript 函数 中 去 寻找 和 修改 与 设置 样式 有 关 的 语句 。 如 果 可 以 在 
样式 表 里 进 行 那些 修改 ， 那 就 好 多 了 。 

这 里 有 一 种 简明 的 解决 方案 : 与 其 使 用 DOM 直接 改变 某 个 元 素 的 样式 , 不 如 通过 JavaScript 
代码 去 更 新 这 个 元 素 的 class 属性 。 

大 家 看 看 StyleHeaderSiblings 函数 是 如 何 添加 样式 的 : 


function styleHeaderSiblings() { 
if (ldocument.getElementsByTagName) return false; 
var headers = document.getElementsByTagName("h1"); 
var elem; 
for (var i=0; icheaders.length; i++) { 
elem = getNextElement(headers[i].nextSibling); 


elem,. style.fontWeight = "bold"; 
elem,. style.fontSize = "1.2em"; 


} 

如 果 决 定 把 紧 跟 在 一 级 标题 之 后 的 那个 元 素 的 CSS 字号 值 从 1.2em 改 为 1.4em，, 你 就 不 得 不 
去 修改 styleHeaderSiblings() 函 数 。 

如 果 你 引用 一 个 外 部 CSS 样式 表 ， 并 且 其 中 有 一 条 针对 .intro 类 的 样式 声明 : 

.intro { 


font-weight: bold; 
font-size: 1.2em; 


} 

现在 只 需 在 styleHeaderSiblings() 函 数 里 把 紧 跟 在 一 级 标题 之 后 的 那个 元 素 的 class 属性 设 
置 为 intro 就 可 以 达到 同样 的 目的 。 

可 以 用 setAttribute 方 法 来 做 这 

elem. setAttribute("class","intro"); 

更 简单 的 办 法 是 更 新 className 属性 。className 属性 是 一 个 可 读 / 可 写 的 属性 , 凡是 元 素 节点 
都 有 这 个 属性 。 

你 可 以 用 className 属性 得 到 一 个 元 素 的 class 属性 : 


亡 
山中 
3 


element .cl1assName 


用 className 属性 和 赋值 操作 符 设 置 一 个 元 素 的 class 属性 : 
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element,.className = Value 
下 面 是 利用 className 属性 编写 出 来 的 styleHeaderSiblings 函数 ， 它 在 设置 样式 时 不 需要 直 
接 与 style 属性 打交道 


function styleHeaderSiblings() { 
if (!document.getElementsByTagName) return false; 
var headers = document.getElementsByTagName("h1"); 
Var elenm; 
for (var i=0; i<headers.length; i++) { 
elem = getNextElement(headers[il].nextSibling); 
elem.className = "intro"; 


} 
} 


现在 ， 不 论 你 什么 时 候 想 改变 紧 跟 在 一 级 标题 之 后 的 那个 元 素 的 样式 ， 只 需 在 CSS 里 修 
改 .intro 类 的 样式 声明 : 


.intro { 
font-weight: bold; 
font-size: 1.4em; 


} 
这 个 技巧 只 有 一 个 不 足 : 通过 className 属性 设置 某 个 元 素 的 class 属性 时 将 替换 (而 不 是 
追加 ) 该 元 素 原 有 的 class 设置 : 


<h1>Man bites dog</h1> 
<p class="disclaimer">This is not a true story</p> 


如 果 对 包含 以 上 标记 的 文档 使 用 styleHeaderSiblings 国 数 ， 那 个 “文本 段 ”元 素 的 class 属 
性 将 从 disclaimer 被 替换 为 intro， 而 这 里 实际 需要 的 是 “追加 ”效果 一 一 class 属性 应 该 变 成 
disclaimer intro， 也 就 是 disclaimer 和 intro 两 种 样式 的 生 加 。 

你 可 以 利用 字符 串 拼 接 操 作 , 把 新 的 class 设置 值 追 加 到 className 属性 上 去 (请 注意 , intro 
的 第 一 个 字符 是 空格 ) ， 如 下 所 示 : 

elem.className += " intro"; 

不 过 ,实际 上 你 只 希望 在 原来 确实 有 一 个 class 的 情况 下 才 这 么 做 。 如 果 原 来 没有 任何 class， 
直接 对 className 属性 赋值 就 可 以 了 。 

在 需要 给 一 个 元 素 追 加 新 的 class 时 ， 你 可 以 按照 以 下 步骤 操作 

(1) 检查 className 属性 的 值 是 否 为 nul1; 

(2) 如 果 是 ， 把 新 的 class 设置 值 直接 赋值 给 className 属性 ; 

(3) 如 果 不 是 ， 和 格 和 新 的 class className 属性 上 去 。 

你 可 以 把 以 上 步骤 封装 为 一 个 国 数 addClass。 这 个 函数 带 两 个 参数 : 第 一 个 是 需要 添加 新 
class 的 元 素 (element) ， 第 二 个 是 新 的 class ee a : 


function addClass(element,value) { 
if (lelement.className) { 
element.className = value; 
} else { 
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newClassName = element.className; 
newClassNamet= " "; 
newClassNamet+= value; 
element.className = newClassName; 
} 
} 


在 styleHeaderSiblings 函数 里 调用 addClass 函数 : 


function styleHeaderSiblings() { 
if (!document.getElementsByTagName) return false; 
var headers = document.getElementsByTagName("h1"); 
var elem; 
for (var i=0; i<headers.length; it+) { 
elem = getNextEJIement(headers[i].nextSibling); 
addClass(elem,"intro"); 


} 
} 


你 也 可 以 更 新 一 下 stripeTables 国 数 。 这 个 国 数 现在 是 通过 直接 改变 奇数 表格 行 的 背景 颜色 


来 实现 斑马 线 效 果 的 : 


function stripeTables() { 
if (!document.getElementsByTagName) return false; 
var tables = document.getElementsByTagName("table"); 
var odd, rows; 
for (var i=0; ixtables.length; i++) { 
odd = false; 
rows = tables[i].getElementsByTagName("tr"); 
for (var j=0; j<rows.length; j++) { 
if (odd == true) { 
rows[j].style.backgroundColor = "#ffc"; 
odd = false; 
} else { 
odd = true; 
} 
} 
} 
} 


先 在 format .css 文件 里 增加 一 条 对 应 于 class="o0dd" 的 样式 声明 : 


.0dd { 
background-color: #ffc; 


然后 修改 stripeTables 函数 ， 让 它 通过 调用 addClass 函数 来 实现 同样 的 效果 


function stripeTables() { 
if (!document.getElementsByTagName) return false; 
var tables = document.getElementsByTagName("table"); 
var odd, rows; 
for (var i=0; ictables.length;j i++) { 
odd = false; 
rows = tables[i].getElementsByTagName("tr"); 
for (var j=0; j<rows.length; j++) { 
if (odd == true) { 
addClass(rows[j],"odd"); 


odd = false; 
} else { 
odd = true; 


} 
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} 
} 
} 


最 终结 果 与 前 面 完 全 相同 。 区 别 在 于 现在 是 通过 CSS 而 不 是 DOM 去 设置 样式 。JavaScript 国 
数 现在 更 新 的 是 className 属性 , 根本 没 碰 style 属性 。 这 确保 了 网 页 的 表示 层 和 行为 层 分 离 得 更 
加 彻底 。 


对 函数 进行 抽象 


你 所 有 的 函数 都 工作 得 很 好 ， 完 全 可 以 让 它们 保持 现状 。 不 过 ， 只 需 再 做 一 些小 小 的 改动 ， 
它们 就 会 变 得 更 加 通用 。 把 一 个 非常 具体 的 东西 改进 为 一 个 较为 通用 的 东西 的 过 程 叫做 抽象 
(abstraction ) 。 


仔细 看 看 StyleHeaderSiblings 函数 ,就 会 发 现 它 仅 适 用 于 hl 元素 ,而 且 classNeme 属性 值 intro 
也 是 硬 编码 在 函数 代码 里 的 : 


function styleHeaderSiblings() { 
if (!document.getElementsByTagName) return false; 
var headers = document.getElementsByTagName("h1"); 
var elem; 
for (var i=0; i<cheaders.length; i++) { 
elem = getNextElement(headers[i].nextSibling); 
addClass(elem, "intro" ); 


} 


把 这 些 具体 的 值 转换 为 这 个 函数 的 参数 , 就 可 以 让 它 成 为 一 个 更 通用 的 函数 。 把 改进 后 的 新 
国 数 命 名 为 styleElementSibling 并 给 它 增加 两 个 参数 一 一 tag 和 theclass: 


function styleElementSiblings(tag, theclass) 
接 下 来 ， 把 函数 代码 中 的 字符 串 “hl1” 全 部 替换 为 参数 变量 tag， 再 把 字符 串 “intro” 全 部 
替换 为 参数 变量 theclass。 为 了 增加 代码 的 可 读 性 ， 你 也 可 顺便 把 原来 的 headers 变量 名 赫 换 成 


elems 以 增加 可 读 性 : 


function styleElementSiblings(tag,theclass) { 
if (!document.getElementsByTagName) return false; 
Var elems = document.getElementsByTagName (tag); 
Var elem; 
for (var i=0; i<elems.length; i++) { 
elem = getNextElement(elems[i].nextSibling); 
addClass (elem, theclass); 
} 
} 


现在 ， 如 果 把 字符 串 值 “nl1” 和 “intro” 作 为 参数 传递 给 这 个 新 函数 ， 就 可 以 获得 原来 的 效 


addloadEvent(function(){ 
styleElementSiblings(“h1", "intro"); 
不 论 何 时 你 发 现 可 以 像 上 面 这 样 对 某 个 函数 进行 抽象 ， 都 应 该 马上 去 做 ,这 上 总 是 一 个 好 主 
意 。 今 后 你 或 许 会 需要 对 另 一 种 元 素 或 另 一 个 className 属性 值 进行 类 似 的 处 理 。 如 果真 是 那样 ， 


那 就 是 写 一 个 styleElementSiblings 通用 函数 的 最 好 时 机 。 
9.5 小 结 


在 本 章 里 ， 你 看 到 了 DOM 完整 全 新 的 一 面 。 此 前 介绍 的 DOM 方法 和 属性 要 么 属于 DOM 
Core， 要 么 属于 HIML-DOM。 本 章 介 绍 的 CSS-DOM 技术 针对 的 是 如 何 得 到 ( 读 ) 和 设置 ( 写 ) 
style 对 象 的 各 种 属性 ， 而 style 对 象 本 身 又 是 文档 中 的 每 个 元 素 节 点 都 具备 的 属性 。 

style 属性 的 最 大 限制 是 它 不 支持 获取 外 部 CSS 设置 的 样式 。 但 你 仍 可 以 利用 style 属性 去 
改变 各 种 HTML 元 素 的 呈现 效果 。 这 在 我 们 无 法 或 是 难以 通过 外 部 CSS 去 设置 样式 的 场合 非常 
有 用 。 只 要 有 可 能 ， 就 应 选择 更 新 className 属性， 而 不 是 去 直接 更 新 Style 对 象 的 有 关 属 性 。 

在 本 章 里 ， 我 们 向 大 家 介绍 了 以 下 几 种 CSS-DOM 技术 的 具体 应 用 示例 。 

D 根据 元 素 在 节点 树 里 的 位 置 设置 它们 的 样式 (styleHeaderSiblings 函数 )。 
过 历 一 个 节点 集合 设置 有 关 元 素 的 样式 (stripeTables 函数 )。 
D 在 事件 发 生 时 设置 有 关 元 素 的 样式 (highlightRows 函数 )。 

这 几 种 应 用 都 属于 用 JavaScript 入 侵 CSS 领地 的 情况 ， 而 我 们 这 么 做 的 理由 不 外 平 两 点 : 其 
一 是 CSS 无 法 让 我 们 找到 想 要 处 理 的 目标 元 素 ， 其 二 是 用 CSS 寻找 目标 元 素 的 办 法 还 未 得 到 广 
泛 的 支持 。 或 许 ， 未 来 的 CSS 技术 能 够 让 我 们 远离 这 种 “不 务 正业 ”的 DOM 脚本 编程 技术 。 

不 过 ， 有 一 种 应 用 大 概 是 CSS 永远 也 无 法 与 DOM 竞争 的 : JavaScript 脚本 能 定时 重复 执行 
一 组 操作 。 通 过 不 断 改变 样式 ， 我 们 就 能 实现 CSS 根本 不 可 能 实现 的 效果 。 

在 下 一 章 里 , 你 会 看 到 一 个 这 样 的 例子 。 你 将 写 一 个 能 够 随 着 时 间 的 推移 而 不 断 刷 新 元 素 位 
置 的 函数 。 简 单 地 说 ， 你 将 用 JavaScript 实现 动画 效果 。 


用 JavaScript 实现 动画 效果 


本 章 内 容 
D 动画 基础 知识 
口 用 动画 丰富 网 页 的 浏览 效果 


在 本 章 里 ， 你 将 看 到 CSS-DOM 技术 最 富 于 动感 的 应 用 之 一 : 让 网 页 上 的 元 素 动 起 来 。 


10.1 动画 基础 知识 


前 面 的 章节 介绍 了 如 何 利用 DOM 技术 修改 文档 的 样式 信息 。 用 JavaScript 添加 样式 信息 可 
以 节约 你 的 时 间 和 精力 ， 但 总 的 来 说 ，CSS 仍 是 完成 这 类 任务 的 最 佳 工 具 。 

不 过 ， 有 一 个 应 用 领域 是 目前 的 CSS 尚且 无 能 为 力 的 。 如 果 我 们 想 随 着 时 间 的 变化 而 不 断 
改变 某 个 元 素 的 样式 ， 则 只 能 使 用 JavaScript。JavaScript 能 够 按照 预定 的 时 间 间 隔 重复 调用 一 个 
国 数 ， 而 这 意味 着 我 们 可 以 随 着 时 间 的 推移 而 不 断 改变 某 个 元 素 的 样式 。 

动画 是 样式 随时 间 变 化 的 完美 例子 之 一 。 简单 地 说 , 动画 就 是 让 元 素 的 位 置 随 着 时 间 而 不 断 
地 发 生变 化 。 


10.1.1 位 置 


网 页 元 素 在 浏览 器 窗口 里 的 位 置 是 一 种 表示 性 的 信息 。 因 此 ， 位 置信 息 通 常 是 由 CSS 负责 
设置 的 。 下 面 这 些 CSS 代码 对 某 个 元 素 在 网 页 上 的 位 置 做 出 了 规定 : 
element { 
position: absolute; 


top: 50px; 
left: 100px; 


这 将 把 element 元 素 摆 放 到 距离 浏览 器 窗口 的 左边 界 100 像素 ,距离 浏览 器 窗口 的 上 边界 50 
像素 的 位 置 上 。 下 面 是 实现 同样 效果 的 DOM 代码 : 


element.style.position = "absolute"; 
element.style.left = "100px"; 
element.style.top = "50px"; 
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position 属性 的 合法 值 有 static、fixed、relative 和 absolute 四 种 。static 是 position 属性 
的 默认 值 ， 意 思 是 有 关 元 素 将 按照 它们 在 标记 里 出 现 的 先后 顺序 出 现在 浏览 器 窗口 里 。relative 
的 含义 与 static 相似 ， 区 别 是 position 属性 等 于 relative 的 元 素 还 可 以 (通过 应 用 float 属性 ) 
从 文档 的 正常 显示 顺序 里 脱离 出 来 。 

如 果 把 某 个 元 素 的 position 属性 设置 为 absolute， 我 们 就 可 以 把 它 摆 放 到 容纳 它 的 “容器 ” 
的 任何 位 置 。 这 个 容器 要 么 是 文档 本 身 ， 要 么 是 一 个 有 着 fixed 或 absolute 属性 的 父 元 素 。 这 个 
元 素 在 原始 标记 里 出 现 的 位 置 与 它 的 显示 位 置 无 关 ， 因 为 它 的 显示 位 置 由 top、1eft、right 和 
bottom 等 属性 决定 。 你 可 以 使 用 像素 或 百分比 作为 单位 设置 这 些 属性 的 值 。 

设置 一 个 元 素 的 top 属性 将 把 该 元 素 摆 放 到 距 文档 顶 特定 距离 的 位 置 , 一 个 元 素 的 bottom 属 
性 将 把 该 元 素 摆 放 到 距 文档 底 边 界 特定 距离 的 位 置 。 类 似 地 ，1eft 或 right 属性 可 用 来 分 别 把 该 
元 素 摆 放 到 距 文 档 左 边界 或 右边 界 特定 距离 的 位 置 。 为 防止 它们 发 生 冲 突 ， 最 好 只 使 用 top 或 只 
使 用 bottom 属性 ，1eft 或 right 属性 也 是 如 此 。 

把 文档 里 的 某 个 元 素 摆 放 到 一 个 特定 的 位 置 是 很 容易 的 事 。 不 妨 假设 有 一 个 这 样 的 元 素 : 

<p id="message">Whee!</p> 

于 是 ， 你 可 以 用 一 个 JavaScript 函数 来 设置 这 个 元 素 的 位 置 : 


function positionMessage() { 
if (!document.getElementById) return false; 
if (ldocument.getElementById("message")) return false; 
var elem = document.getElementById("message" ); 
elem.style.position = "absolute ; 
elem.style,left = "50px"; 
elem. style.top = "100px"; 


} 
在 页 面 加 载 时 调用 这 个 positionMessage 函数 ， 会 把 这 有 段 文本 摆 放 到 距 浏 览 器 窗口 的 左边 界 
50 像 素 、 距 浏览 器 窗口 的 顶 边 界 100 像素 的 位 置 : 


window.onload = positionMessage; 


不 过 ， 最 好 是 用 addLoadEvent 函数 来 完成 ， 如 下 所 示 : 


function addLoadEvent(func) { 
var oldonload = window.onload; 
if (typeof window.onload != 'function') { 
window.onload = func; 
} else { 
window.onload = function() { 
oldonload(); 
func(); 


} 


addLoadEvent (positionMessage); 


图 10-1 是 按 position="absolute "的 情况 来 摆 放 这 个 元 素 的 效果 。 
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AAA Animation © 


Whee! 


图 10-1 


改变 某 个 元 素 的 位 置 也 很 简单 ,只 要 执行 一 个 函数 去 改变 这 个 元 素 的 style.top 或 style.1eft 
等 属性 就 行 了 : 
function moveMessage() { 
if (!document.getElementById) return false; 
if (!document.getElementById("message")) return false; 


var elem = document .getElementById("message" ); 
elem.style.left = "200px"; 


编写 一 个 这 样 的 函数 并 不 难 ， 问 题 是 该 如 何 去 调用 这 个 函数 呢 》 如 果 让 moveMessage 函数 在 
页 面 加 载 时 运行 ,这 个 元 素 的 位 置 将 立刻 发 生变 化 一 一 由 positionMessage 函数 给 出 的 原始 位 置 会 
被 立刻 覆盖 : 


addLoadEvent(positionMessage)j 
addLoadEvent (moveMessage); 


如 图 10-2 所 示 ， 这 个 元 素 的 显示 位 置 立 刻 发 生 了 变化 。 


[下 Animation 瑟 ) 
Ea A 
起 A - . 
Whee! 
Done 
图 10-2 


元 素 的 显示 位 置 立 刻 发 生变 化 并 不 是 我 们 想 要 的 动画 效果 。 要 获得 真正 的 动画 效果 ,必须 让 
元 素 的 位 置 随 着 时 间 不 断 地 发 生变 化 。 
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导致 元 素 的 显示 位 置 立 刻 发 生变 化 的 根源 是 JavaScript 太 有 效率 了 :函数 一 个 接 一 个 地 执行 ， 
其 间 根 本 没有 我 们 所 能 察觉 的 间隔 。 为 了 实现 动画 效果 ， 我 们 必须 “创造 ”出 时 间 间 隔 来 ， 而 这 
正 是 我 们 将 要 探讨 的 问题 。 


10.1.2 ”时间 


JavaScript 国 数 SetTimeout 能 够 让 某 个 函数 在 经 过 一 段 预定 的 时 间 之 后 才 开 始 执行 。 这 个 函 
数 带 有 两 个 参数 : 第 一 个 参数 通常 是 一 个 字符 串 ， 其 内 容 是 将 要 执行 的 那个 函数 的 名 字 ; 第 二 个 
参数 是 一 个 数值 , 它 以 毫秒 为 单位 设 定 了 需要 经 过 多 长 时 间 后 才 开 始 执 行 第 一 个 参数 所 给 出 的 函 
数 : 

setTimeout("function",interval) 

在 绝 大 多 数 时 候 ， 把 这 个 函数 调用 赋值 给 一 个 变量 将 是 个 好 主意 : 


variable = setTimeout("function",interval) 

如 果 想 取消 某 个 正在 排队 等 待 执 行 的 函数 , 就 必须 事先 像 上 面 这 样 把 setTimeout 函数 的 返 
一 个 变量 。 你 可 以 用 一 个 名 为 clearTimeout 的 函数 来 取消 “等 待 执行 ”队列 里 的 某 个 
数 。 这 个 函数 需要 一 个 参数 一 一 保存 着 某 个 setTimeout 函数 调用 返回 值 的 变量 

clearTimeout (variable) 


修改 positionMessage 函数 , 让 它 在 5 秒 (或 者 说 5000 毫秒 ) 之 后 才 去 调用 moveMessage 函数 : 


function positionMessage() { 
if (!document.getElementById) return false; 
if (!document.getElementById("message")) return false; 


回 


名 


var elem = document ,getElementById( message"); 
elem.style.position = "absolute"; 
elem.style.left = "50px"; 

elem.style.top = "100px"; 

movement = setTimeout("moveMessage()",5000); 


} 
positionMessage 函数 仍 将 在 页 面 加 载 时 得 到 执行 


addLoadEvent (positionMessage); 
这 样 一 来 , 那 条 消息 将 先 出 现在 它 的 原始 位 置 上 ,然后 在 5 秒 之 后 才 向 右 “ 跳 跃 ”150 像素 。 
在 那 5 秒 钟 的 等 待 时 间 里 ， 我 可 以 随时 使 用 下 面 这 条 语句 取消 这 一 “跳跃 ”行为 : 
clearTimeout(movement ); 
movement 变量 对 应 着 在 sage 函数 里 定义 的 setTimeout 调用 。 它 是 一 个 全 局 变量 ， 
我 在 声明 它 时 未 使 用 关键 字 var。 这 意味 着 那个 “跳跃 ”行为 可 以 在 positionMessage 函数 以 外 的 
地 方 被 取消 。 
10.1.3 ”时 间 递 增 量 


把 某 个 元 素 在 5 秒 钟 之 后 向 右 移 动 150 像素 的 显示 效果 称 为 动画 实在 有 点 儿 和 勉强 。 真正 的 动 
画 效 果 是 一 个 渐变 的 过 程 ， 元 素 应 该 从 出 发 点 逐步 地 移动 到 目的 地 ， 而 不 是 从 出 发 点 一 下 子 跳跃 
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到 目的 地 。 

我 们 更 新 一 下 moveMessage 国 数 ， 让 元 素 的 移动 以 新 变 的 方式 发 生 。 下 面 是 新 moveMessage 国 
数 的 逻辑 。 

(1) 获得 元 素 的 当前 位 置 。 

(2) 如 果 元 素 已 经 到 达 它 的 目的 地 ， 则 退出 这 个 函数 。 

(3) 如 果 元 素 尚 未 到 达 它 的 目的 地 ， 则 把 它 向 目的 地 移 近 一 点 儿 。 

(4) 经 过 一 段 时 间 间 隔 之 后 从 步骤 1 开始 重复 上 述 步骤 。 

第 一 步 是 确定 元 素 的 当前 位 置 。 这 一 点 可 以 通过 查询 元 素 的 style.top 和 style.1eft 等 位 置 
属性 做 到 。 我 们 把 style. 1left 和 style.top 属性 的 值 分 别 赋 给 变量 xpos 和 ypos: 


var xpos = elem.style.left; 
Var ypos = elem.style.top; 


当 moveMessage 函数 在 positionMessage 函数 之 后 被 调用 时 ，xpos 变量 将 被 赋值 为 50px，ypos 
变量 将 被 赋值 为 100px。 我 遇 到 了 一 点 儿 小 麻烦 : 这 两 个 值 都 是 字符 串 ， 而 接 下 来 的 代码 需要 进 
行 许多 算术 比较 操作 。 我 需要 的 是 数 ， 不 是 字符 串 。 

JavaScript 函数 parseInt 可 以 把 字符 串 里 的 数值 信息 提取 出 来 。 如 果 把 一 个 以 数字 开头 的 字符 
串 传 递 给 这 个 函数 ， 它 将 返回 一 个 数值 : 

parseInt(string) 


下 面 是 一 个 例子 : 

parseInt("39 steps"); 

这 个 函数 调用 将 返回 数值 “39” (不 包括 引号 )。 

parseInt 函数 的 返回 值 通常 是 整数 。 如 果 需 要 提取 的 是 带 小 数 点 的 数值 (也 就 是 序 点 数 )， 就 
应 该 使 用 相应 的 parsef loat 函数 : 


parseFloat(string) 


我 们 在 moveMessage 函数 里 只 与 整数 打交道 ， 所 以 使 用 parseInt 函数 : 


var xpos = parseInt(elem.style.1left); 
Var ypos = parseInt(elem.style.top); 


parseInt 函数 将 把 字符 串 “50px” 转 换 为 整数 50, 把 字符 串 “100px” 转 换 为 整数 100。 现在 ， 
xpos 和 ypos 变量 分 别 包含 整数 50 和 100。 


注意 只 有 使 用 了 DOM 脚本 或 Style 属性 为 元 素 分 配 了 位 置 后 ,这 里 的 parselnt 函数 才 起 作用 。 


在 moveMessage 国 数 里 ， 接 下 来 的 几 个 步骤 需要 用 到 大 量 的 比较 操作 符 。 

第 一 次 测试 是 否 相等 ， 我 们 需要 知道 变量 xpos 和 ypos 的 值 是 否 等 于 目的 地 那里 的 “ 左 ” 
位 置 和 “上 ”位 置 。 如 果 是 ， 退 出 这 个 函数 。 相 等 操作 符 由 两 个 等 号 构成 。( 记 住 ， 一 个 等 号 是 
赋值 。) 
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if (xpos == 200 && ypos == 100) { 
return true; 


如 果 message 元 素 还 没有 到 达 它 的 目的 地 ， 则 继续 执行 下 面 的 代码 。 
接 下 来 , 根据 message 元 素 的 当前 位 置 及 其 目的 地 的 关系 更 新 变量 xpos 和 ypos 的 值 。 我 们 希 
望 把 它们 移动 到 一 个 距 目 的 坐标 更 近 的 地 方 。 如 果 xpos 小 于 终点 的 left， 给 它 加 1: 


if (xpos < 200) { 
XPpOS++; 


如 果 xpos 大 于 终点 的 le 人 t， 给 它 减 1: 


if (xpos > 200) { 
Xpos--; 


根据 ypos 的 值 和 终点 top 的 关系 ， 对 变量 ypos 进行 类 似 的 更 新 : 


if (ypos < 100) { 
ypos++; 


if (ypos > 100) { 
ypos- 


现在 ， 你 知道 把 变量 xpos 和 ypos 由 字符 串 转 换 为 数 的 原因 了 : 我 要 用 大 于 和 小 于 操作 符 进 
行 数值 比较 ， 并 根据 比较 的 结果 更 新 它们 的 值 。 

接 下 来 ， 需 要 把 变量 xpos 和 ypos 的 值 应 用 到 message 元 素 的 style 属性 。 我 们 需要 把 字符 串 
“px” 追 加 到 这 两 个 值 的 末尾 ， 并 把 它们 赋 给 1eft 和 top 属性 : 


elem.style.left = xpos + "px"; 
elem.style.top = ypos + "px"; 


最 后 , 我 们 需要 在 一 个 短暂 的 停顿 之 后 重复 执行 这 个 函数 。 我 们 把 停顿 时 间 设 置 为 百 分 之 一 
秒 ， 也 就 是 10 毫秒 : 
movement = setTimeout("moveMessage()",10); 


下 面 是 moveMessage 函数 的 代码 清单 : 


function moveMessage() { 
if (ldocument.getElementById) return false; 
if (!document.getElementById("message")) return false; 
var elem = document.getElementById("message" ); 
var xpos = parseInt(elem.style.1left); 
var ypos = parseInt(elem.style.top); 
if (xpos == 200 && ypos == 100) { 
return true; 


if (xpos < 200) { 
xpostt+; 


if (xpos > 200) { 
xpos--; 


178 ”第 10 章 用 JavaScript 实 现 动 画 效 果 


} 
if (ypos < 100) { 
ypost+; 


f (ypos > 100) { 
ypos--; 


elem.style.left = xpos + "px"; 
elem.style.top = ypos + "px"; 
movement = setTimeout(" moveMessage()” ,10); 


这 个 函数 使 得 message 元 素 以 每 次 1 像素 的 方式 在 浏览 器 窗口 里 移动 。 一 旦 这 个 元 素 的 top 
和 left 属性 同时 等 于 100px 和 200px， 这 个 函数 就 停止 执行 。 这 可 是 实 实在 在 的 动画 效果 一 一 虽 
然 它 没有 什么 实际 的 意义 。 稍 后 ， 我 们 将 利用 同样 的 原理 实现 一 个 有 实用 价值 的 例子 


10.1.4 ”抽象 


刚才 编写 的 moveMessage 函数 只 能 完成 一 项 非常 特定 的 任务 。 它 将 把 一 个 特定 的 元 素 移 动 到 
一 个 特定 的 位 置 , 两 次 移动 之 间 的 停顿 时 间 也 是 一 段 固定 的 长 度 。 所 有 这 些 信息 都 是 硬 编码 在 函 
数 代码 里 的 : 


function moveMessage() { 

if (ldocument.getElementById) return false; 

if (!document.getElementById("message")) 
return false; 

var elem = document.getElementById("message" ); 

var xpos = parseInt(elem.style.1left); 

var ypos = parseInt(elem.style.top); 

if (xpos == 200 8&& ypos == 100) { 

return true; 


if (xpos < 200) { 
Xpos++j 


if (xpos > 200) { 


xpos--; 


} 
if (ypos < 100) { 
ypost++; 


if (ypos > 100) { 
ypos--; 
} 


elem.style.left = xpos + "px"; 
elem.style.top = ypos + "px"; 
movement = setTimeout ("moveMessage()",10); 


} 

如 果 把 这 些 常数 都 改 为 变量 ,， 这 个 函数 的 灵活 性 和 适用 范围 就 会 大 大 提高 。 通 过 对 
moveMessage 国 数 进行 抽象 ， 你 可 以 让 它 变 得 更 加 通用 (便于 重用 )。 

1. 创建 moveElement 函 数 

把 新 函数 命名 为 moveElement。 与 moveMessage 函数 不 同 ， 新 函数 的 参数 将 会 有 多 个 。 下 面 是 
每 次 调用 这 个 新 函数 时 可 能 变化 的 东西 。 
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(1) 打算 移动 的 元 素 的 ID。 

(2) 该 元 素 的 目的 地 的 “ 左 ” 位 置 。 

(3) 该 元 素 的 目的 地 的 “上 ”位 置 。 

(4) 两 次 移动 之 间 的 停顿 时 间 。 

这 些 参数 都 应 该 取 一 个 描述 性 的 名 字 : 

(1) elementID 

(2) final x 

(3) final y 

(4) interval 

定义 moveElement 函数 的 第 一 步 是 声明 它 的 各 个 参数 : 

function moveElement(elementID, final x,final y,interval) { 

用 这 些 变量 把 前 面 硬 编码 在 moveMessage 国 数 里 的 有 关 常 数 全 部 替换 掉 。 在 moveMessage 函数 
的 开头 是 以 下 几 条 语句 : 

if (!document.getElementById) return false; 


if (!document.getElementById("message")) return false; 
Var elem = document .getElementById("message" ); 


把 这 几 条 语句 里 的 getElementById("message") 全 部 替换 为 getElementById (element1ID): 


if (!document.getElementById) return false; 
if (!document.getElementById(elementID)) return false; 
var elem = document.getElementById(elementID); 


elem 变量 现在 对 应 着 你 想 移动 的 任何 元 素 。 
接 下 来 的 两 行 语句 用 不 着 修改 。 它 们 负责 把 给 定 元 素 的 left 和 top 属性 转换 为 数值 , 并 把 转 


换 结果 分 别 赋值 给 变量 xpos 和 ypos: 


Var xpos = parseInt(elem.style.left); 
Var ypos = parseInt(elem.style.top); 


接 下 来 , 检查 给 定 元 素 是 否 已 经 到 达 目 的 地 。 在 moveMessage 函数 里 , 目的 地 的 坐标 值 是 200 
(left 位 置 ) 和 100 (top 位 置 )。 


if (xpos == 200 && ypos == 100) { 
return true; 


在 moveElement 函数 里 ， 目 的 地 坐标 值 将 由 变量 final_x 和 final_y 提供: 0 


if (xpos == final x && ypos == final y) { 
return true; 


再 往 后 是 对 变量 xpos 和 ypos 进行 刷新 的 几 条 语句 。 如 果 变 量 xpos 的 值 小 于 目的 地 的 “ 左 ” 
位 置 ， 给 它 加 1。 
原来 的 目的 地 的 left 位 置 是 硬 编码 在 函数 代码 里 的 常数 200: 


if (xpos < 200) { 
Xxpos++; 
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现在 的 目的 地 的 left 位 置 由 变量 final x 提 供 : 


if (xpos < final x) { 
Xxpost++; 


类 似 地 ， 如 果 xpos 大 于 目的 地 的 le 化 位 置 ，xpos 减 1: 


if (xpos > final x) { 
xpos--; 


对 负责 更 新 变量 ypos 的 语句 做 同样 的 修改 。 如 果 ypos 小 于 final_y， 给 它 加 1， 如 果 它 大 于 
final y， 给 它 减 1: 


if (ypos < final y) { 
ypos++; 


if (ypos > final_y) { 
ypos--; 
} 


接 下 来 的 两 行 语句 不 用 修改 。 它 们 负责 把 字符 串 "px" 追 加 到 变量 xpos 和 ypos 的 末尾 ， 并 将 
其 赋值 给 elem 元 素 的 left 和 top 样式 属性 : 


elem.style.left = xpos + "px"; 
elem.style.top = ypos + "px"; 


最 后 ， 在 经 过 一 段 适当 的 时 间 间 隔 之 后 再 次 调用 同一 个 函数 。 在 moveMessage 函数 里 ， 这 个 
环节 相当 简单 : 每 隔 10 毫秒 调用 一 次 moveMessage 国 数 : 

movement = setTimeout("moveMessage()",10); 

在 moveElement 函数 里 ,事情 变 得 有 一 点 儿 复 杂 。 因 为 在 下 一 次 调用 moveElement 时 ， 我 们 还 
需要 把 elementID、final x、final y 和 interval 等 参数 传 给 它 。 这 将 形成 一 个 如 下 所 示 的 字符 串 : 

"moveElement('"+elementID+"', "+final x+","+final y+","+interval+")" 

字符 串 拼接 操作 实在 不 少 ! 与 其 把 一 个 这 么 长 的 字符 串 直接 插入 到 setTimeout 函数 里 去 , 不 
如 先 把 这 个 字符 串 赋 值 给 repeat 变量 : 

var repeat = "moveElement('"+elementID+"’,"+final x+","+final y+","+interval+")"; 

现在 , 我 们 只 需 把 repeat 变量 插入 到 setTimeout 函数 里 作为 它 的 第 一 个 参数 就 行 了 。 第 二 个 
参数 是 再 次 调用 第 一 个 参数 所 指定 的 函数 之 前 需要 等 待 的 时 间 间 隔 。 这 个 间隔 在 moveMessage 图 
数 里 被 硬 编码 为 10 毫秒 ， 它 现在 将 由 变量 interval 提供 : 

movement = setTimeout(repeat,interval); 

用 一 个 右 花 括号 结束 这 个 函数 : 

} 

下 面 是 moveElement 函数 的 代码 清单 : 


function moveElement(elementID, final x,final y,interval) { 
if (!document.getElementById) return false; 


if (!document.getElementById(elementID)) return false; 
var elem = document.getElementById(elementID); 
var xpos = parseInt(elem.style.1left); 
var ypos = parseInt(elem.style.top); 
if (xpos == final x && ypos == final y) { 
return true; 


} 
if (xpos < final x) { 
xpostt+; 


if (xpos > final x) { 
xpos--; 


} 
if (ypos < final y) { 
ypost+; 


if (ypos > final y) { 
ypos--; 


elem.style.left = xpos + "px"; 
elem.style.top = ypos + "px"; 
Var repeat = "moveElement('"+elementID+ 
movement = setTimeout(repeat,interval); 


} 

把 moveElement 函数 保存 为 moveElement .js 文件 。 把 这 个 文件 放 入 scripts 文件 夹 ， 别 忘 了 把 
addLoadEvent .js 文件 也 放 到 那里 。 

2. 使 用 moveElement 函 数 

现在 ， 我 们 来 测试 一 下 这 个 函数 。 

首先 重新 创建 前 面 的 示例 ， 创 建 一 个 名 为 message.html 的 文档 ， 让 它 包 含 一 个 id 属性 值 是 
message 的 文本 段 : 


<!DOCTYPE html> 
<html] lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Message</title> 
</head> 
<body> 
<p id="message">Whee!l</p> 
</body> 
</html> 


要 想 看 到 动画 效果 ， 我 们 必须 先 设 定 它 的 初始 位 置 。 编 写 一 个 名 为 positionMessage.js 的 
JavaScript 文件 。 在 positionMessage 国 数 的 末尾 ， 调 用 moveElement 函数 : 


function positionMessage() { 


if (ldocument.getElementById) return false; 

if (!document.getElementById("message")) return false; 
Var elem = document.getElementById("message"); 
elem.style.position = "absolute"; 

elem.style.left = "50px"; 

elem.style.top = "100px"; 

moveElement("message" ,200,100,10); 


rn mm mm 


， "+final_x+"，"+final_y+”"，"+inteTVal+") 5 


addLoadEvent(positionMessage); 


上 面 这 段 代码 中 的 moveElement 函数 调用 语句 将 把 字符 串 值 “message” 传 递 给 elementID 参 
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数 , 把 数值 200 传递 给 final_x 参 数 , 把 数值 100 传递 给 final_y 参数 , 把 数值 10 传递 给 interval 
参数 。 

scripts 文件 夹 现在 包含 三 个 文件 : addLoadEvent .js、positionMessage.js 和 moveElement .jS。 
我 们 需要 在 message.html 文档 里 插入 一 些 <script> 标 签 来 引用 这 几 个 脚本 文件 ， 如 下 所 示 : 


<!DOCTYPE html> 

<html] lang="en"> 

<head> 
<meta charset="utf-8" /> 
<title>Message</title> 

</head> 

<body> 
<p id="message">Whee!</p> 
<script src="scripts/addLoadEvent.js"></script> 
<script src="scripts/positionMessage.js"></script> 
<script src="scripts/moveElement.js"></script> 


</body> 
</html> 
现在 ， 把 message.html 文档 加 载 到 一 个 Web 浏览 器 里 就 可 以 看 到 我 们 所 实现 的 动画 效果 了 ， 
如 图 10-3 所 示 ， 那 个 元 素 将 在 浏览 器 窗口 里 横向 移动 。 
[日 日 日 Message SS 
4 宁 庆 日 台 aore 
WheeWhee! 
图 10-3 


至 此 ， 一 切 都 进行 得 很 顺利 。moveElement 函数 与 moveMessage 函数 的 效果 完全 一 样 。 不 过 ， 
因为 我 们 已 经 对 这 个 函数 进行 过 抽象 处 理 ， 所 以 现在 可 以 把 任意 的 参数 传递 给 它 。 比 如 说 ， 如 果 
改变 参数 final_x 和 final_y 的 值 ， 就 可 以 改变 动画 的 移动 方向 ， 如 果 改 变 参 数 interval 的 值 ， 
就 可 以 改变 动画 的 移动 速度 : 

function moveElement(elementID, final_x,final_y,interval) 

在 positionMessage.js 文件 里 修改 positionMessage 函数 的 最 后 一 行 ,让 这 三 个 值 发 生 点 儿 变化 : 


function positionMessage() { 
if (!document.getElementById) return false; 
if (!document.getElementById("message")) return false; 
var elem = document .getElementById("message" ); 
elem.style.position = "absolute"; 
elem.style.left = "50px"; 
elem.style.top = "100px"; 
moveElement("message" ,125,25,20); 


} 
addLoadEvent(positionMessage); 


10.1 


动画 基础 知识 
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在 Web 浏览 器 里 刷新 message.html 文件 , 就 可 以 看 到 新 的 动画 效果 了 : 那个 元 素 现 在 将 斜 向 


移动 ， 移 动 的 速度 也 变 慢 了 ， 如 图 10-4 所 示 。 


OO 加 ES Message 一 
优 全 人 削 © 
Whee! 
Whee! 
Done 
图 10-4 
还 可 以 改变 moveElement 函数 的 elementID 参数 值 : 


function moveElement(elementID, final x,final y,interval) 


在 message.html 文件 里 增加 一 个 新 元 素 ， 把 它 的 id 属性 设置 为 message2: 


<!DOCTYPE html> 
<html] lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Message</title> 
</head> 
<body> 
<p id="message">Whee!</p> 
<p id="message2">Whoa!</p> 
«script src= "scripts/addLoadEvent.js"></script> 
«script src="scripts/positionMessage.js"></script> 
«script src="scripts/moveElement.js"></script> 
</body> 
</html> 


现在 ， 在 positionMessage.js 文件 里 增加 一 些 代 码 。 先 为 message2 元 素 设 定 一 个 初始 位 置 ， 
把 message2 作为 它 的 第 一 个 参数 传递 ; 


然后 增加 一 条 moveElement 函数 调用 语句 


function positionMessage() { 
if (ldocument.getElementById) return false; 
if (ldocument.getElementById("message")) return false; 
var elem = document.getElementById("message" ); 
elem. style.position = "absolute"; 
elem.style.left = "50px"; 
elem. style.top = "100px"; 
moveElement ("message" ,125,25,20); 
if (ldocument.getElementById("message2")) return false; 
Var elem = document.getElementById("message2"); 
elem.style.position = "absolute"; 
elem.style.left = "50px"; 
elem.style.top = "50px"; 
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moveElement("message2",125,125,20); 


addLoadEvent (positionMessage); 
在 Web 浏览 器 里 刷新 message.html 文件 就 可 以 看 到 新 的 动画 效果 了 ， 如 图 10-5 所 示 。 两 个 
元 素 将 沿 着 不 同 的 方向 同时 移动 。 


AAA Message SS 
饭 从 @file://localhost/Usersjj* © >} © 
Whee! 
Whss 
Whoal 
Done 
图 10-5 


在 这 两 个 例子 里 ， 所 有 工作 都 是 moveElement 函数 完成 的 。 只 需 简单 地 改变 一 下 传递 给 这 个 
国 数 的 参数 值 ， 你 就 可 以 随意 重用 它 。 这 正 是 用 参数 变量 代替 硬 编码 常数 的 最 大 好 处 。 


10.2 ”实用 的 动画 


有 了 moveElement 这 个 通用 的 函数 ， 你 就 可 以 用 它 沿 任意 方向 移动 页 面 元 素 。 从 程序 设计 
的 角度 看 ， 这 会 给 人 留 下 相当 深刻 的 印象 ， 但 从 实用 的 角度 看 ， 它 的 意义 似乎 并 不 大 。 

网 页 上 的 动画 元 素 不 仅 容易 引起 访问 者 的 反感 , 还 容易 导致 各 种 各 样 的 可 访问 性 问题 。W3C 
在 它们 的 Web Content Accessibility Guidelines (Web 内 容 可 访问 性 指南 ) 7.2 节 里 给 出 了 这 样 的 建 
议 :“ 除 非 浏 览 器 允许 用 户 “ 冻 结 ” 移 动 着 的 内 容 ， 否 则 就 应 该 避免 让 内 容 在 页 面 中 移动 。( 优 先 
级 2)。 如 果 页 面 上 有 移动 着 的 内 容 , 就 应 该 用 脚本 或 插件 的 机 制 允 许 用 户 冻 结 这 种 移动 或 动态 更 
新 行为 。 

这 里 的 关键 在 于 用 户 能 不 能 控制 。 解决 了 这 个 问题 , 根据 用 户 行为 移动 一 个 页 面 元 素 可 能 起 
到 增强 网 页 的 效果 。 让 我 们 看 一 个 能 够 起 到 增强 页 面 效 果 的 例子 。 


10.2.1 提出 问题 


我 们 有 一 个 包含 一 系列 链接 的 网 页 。 当 用 户 把 鼠标 指针 大 停 在 其 中 的 某 个 链接 上 时 ,我 们 想 
用 一 种 先睹为快 的 方式 告诉 用 户 这 个 链接 将 把 他 们 带 往 何方 。 我 们 可 以 展示 一 张 预览 图 片 。 
这 个 网 页 的 基本 文档 是 1ist.html 文件 ， 下 面 是 它 的 代码 清单 : 
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<!DOCTYPE html> 
<html] lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Web Design</title> 
</head> 
<body> 
<h1>Web Design</h1> 
<p>These are the things you should know.</p> 
<ol id="linklist"> 
<1i> 
«<a href="structure.html">Structure</a> 
</1i> 
<1i> 
<a href="presentation.html">Presentation</a> 
</1i> 
<1i> 
<a href="behavior.html">Behavior</a> 
</1i> 
</01> 
</body> 
</html> 


这 个 网 页 里 的 每 个 链接 分 别 指向 一 个 介绍 相关 网 页 设计 技巧 的 页 面 。 这 些 链接 内 文本 已 经 简 
单 介绍 了 目标 页 面 的 内 容 (如 图 10-6 所 示 )。 


[9© AAO 加 = Web Des gn 全 
二 四 乱 全 v © 
Web Design 


These are the things you should know. 


1. Structure 
2. Presentation 
3. Behavior 


Done 


图 10-6 


事实 上 这 个 网 页 已 经 足够 完美 。 也 就 是 说 , 为 它 增加 一 种 视觉 提示 效果 会 让 这 个 网 页 更 有 了 吸 
引力 。 

从 某 种 意义 上 讲 , 这 个 案例 与 我 们 在 本 书 前 面 的 有 关 章 节 里 实现 的 图 片 库 颇 为 相似 : 它们 都 
包含 着 一 系列 链接 ， 我 想 对 它们 做 的 改进 都 是 显示 一 张 图 片 。 但 我 们 这 一 次 要 在 onmouseover 事 
件 ( 请 注意 ,不 是 onclick 事件 ) 被 触发 时 显示 一 张 图 片 。 

我 们 将 沿用 图 片 库 案 例 中 的 脚本 一 一 只 需 把 每 个 链接 上 的 事件 处 理 函 数 从 onclick 改 为 
onmouseover。 它 能 工作 , 但 图 片 显示 得 不 够 流畅 : 当 用 户 第 一 次 把 鼠标 指针 甚 停 在 某 个 链接 上 时 ， 
新 图 片 将 被 加 载 过 去 。 即 使 是 在 一 个 高 速 的 网 络 连 接 上 ,这 多 少 也 需要 花费 点 儿 时 间 ， 而 我 们 希 
望 能 够 立刻 响应 。 
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10.2.2 ”解决 问题 


如 果 为 每 个 链接 分 别 准备 一 张 预 览 图 片 , 在 切换 显示 这 些 图 片 时 总 会 有 一 些 延迟 。 除 此 之 外 ， 
简单 地 切换 显示 这 些 图 片 也 不 是 我 们 期 望 的 效果 。 我 们 想 要 的 是 一 种 更 快 更 好 的 东西 。 
下 面 是 我 们 要 做 的 事情 。 
D 为 所 有 的 预览 图 片 生成 一 张 “ 集 体 照 ”形式 的 图 片 。 
D 隐藏 这 张 “ 集 体 照 ”图 片 的 绝 大 部 分 。 
D 当 用 户 把 鼠标 指针 基 停 在 某 个 链接 的 上 方 时 ， 只 显示 这 张 “ 集 体 照 ”图片 的 相应 部 分 。 
我 已 经 制作 出 了 一 张 这 样 的 “集体 照 ” 图 片 , 它 由 三 张 预览 图 片 和 一 张 默认 图 片 构成 , 如 图 10-7 
所 示 。 


Choose 
a topic HTML CS5S DOM 


scripting 


图 10-7 


这 个 图 片 的 文件 名 是 topics.gif。 它 的 宽度 是 400 像素 ， 高 度 是 100 像素 。 
我 们 把 topics .gif 图 片 插 入 到 1ist.html] 文档 里 ,并 把 这 个 图 片 元 素 的 id 属性 设置 为 preview: 


<!DOCTYPE html> 
<html] lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Web Design</title> 
</head> 
<body> 
<h1>Web Design</h1> 
<p>These are the things you should know.</p> 
<ol id="linklist"> 
<1i> 
«a href="structure.html">Structure</a> 
</1i> 
<1i> 
«a href="presentation.html">Presentation</a> 
</1i> 
<1i> 
<a href="behavior.html">Behavior</a> 
</]i> 
</01> 
<img src="images/topics.gif" alt="building blocks of web design” id="preview" /> 
</body> 
</html> 


图 10-8 是 带 着 那些 链接 和 那 张 “集体 照 ” 图 片 的 网 页 显示 效果 。 
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图 10-8 


现在 ， 整 张 “ 集 体 照 ”图 片 都 是 可 见 的 。 每 次 我 们 都 只 想 让 这 个 图 片 的 某 个 100 x 100 像素 
的 部 分 出 现 。 我 们 无 法 用 JavaScript 做 到 这 一 点 ， 但 可 以 用 CSS 来 做 。 


10.2.3 CSS 


CSS 的 overflow 属性 用 来 处 理 一 个 元 素 的 尺寸 超出 其 容器 尺寸 的 情况 。 当 一 个 元 素 包含 的 内 
容 超出 自身 的 大 小 时 ， 就 会 发 生 内 容 洪 出 ， 这 种 情况 ， 你 可 以 对 内 容 进 行 “裁剪 ”"， 只 让 一 部 分 
内 容 可 见 。 你 还 可 以 通过 overflow 属性 告诉 浏览 器 是 否 需要 显示 深 动 条 , 以 便 让 用 户 能 够 看 到 内 
容 的 其 余部 分 。 

overflow 属性 的 可 取 值 有 4 种 : visible、hidden、scrol1 和 auto。 
D visible: 不 裁剪 溢出 的 内 容 。 浏 览 器 将 把 溢出 的 内 容 呈 现在 其 容器 元 素 的 显示 区 域 以 外 ， 


全 部 内 容 都 可 见 。 
D hidden: 隐藏 溢出 的 内 容 。 内 容 只 显示 在 其 容器 元 素 的 显示 区 域 里 , 这 意味 着 只 有 一 部 分 
内 容 可 见 。 


D scrol1: 类 似 于 hidden， 浏览 器 将 对 溢出 的 内 容 进 行 隐藏 ， 但 显示 一 个 滚动 条 以 便 让 用 户 
能 够 滚动 看 到 内 容 的 其 他 部 分 。 
D auto: 类 似 于 scrol1， 但 浏览 器 只 在 确实 发 生 溢出 时 才 显 示 深 动 条 。 如 果 内 容 没 有 溢出 ， 
就 不 显示 滚动 条 。 

如 此 说 来 ,在 overflow 属 性 的 4 种 可 取 值 当中 ,最 能 满足 我 们 要 求 的 显然 是 hidden。 我 们 有 
一 张 实际 尺寸 是 400 x 100 像素 的 图 片 , 但 我 每 次 只 想 显 示 这 张 图 片 中 一 个 尺寸 为 100 像素 x 100 
像素 的 部 分 。 

首先 ， 需 要 把 这 张 图 片 放 到 一 个 容器 元 素 。 我 们 把 它 放 入 一 个 div 元素， 并 把 这 个 div 元 素 
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的 id 属性 值 设 置 为 slideshow: 


<div id="slideshow"> 
<img SITC= "images/topics.gif”3alt="building blocks of web design" id="preview” /> 
</div> 


创建 一 个 样式 表 文 件 layout .css， 把 它 放 入 styles 文件 夹 。 
在 1ayout.css 文件 里 ， 我 们 对 id="slideshow" 的 div 元素 的 尺寸 做 了 如 下 设置 : 


#slideshow { 
width: 100px; 
height: 100px; 
position: relative; 


把 position 设置 为 relative 很 重要 ， 因 为 我 们 想 让 子 图 片 使 用 绝对 位 置 。 通 过 使 用 值 
relative， 子 元 素 的 (0, 0) 坐 标 将 固定 在 slideshow div 的 左上 角 。 
把 CSS overflow 属性 设置 为 hidden， 就 能 确保 其 中 的 内 容 会 被 裁剪 . 


#slideshow { 
width: 100px; 
height: 100px; 
position: relative; 
overflow: hidden; 


} 
接 下 来 ， 我 们 添加 一 个 <link> 标 签 ， 把 layout .css 样式 表 引 入 1ist.html 文档 : 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Web Design</title> 
《link rel="stylesheet" href="styles/layout.css" media="screen” /> 
</head> 
<body> 
<h1>Web Design</h1> 
<p>These are the things you should know.</p> 
<0ol id="linklist"> 
<1i> 
<a href="structure.html">Structure</a> 
</1i> 
<1i> 
<a href="presentation.html">Presentation</a> 
</]i> 
<1i> 
<a href="behavior.html">Behavior</a> 
</]i> 
</01> 
<div id="slideshow"> 
<img src="images/topics.gif" alt="building blocks of web design” id="preview" /> 
</div> 
</body> 
</html> 


现在 , 把 1ist.html 文档 加 载 到 浏览 器 ， 就 可 以 看 到 变化 (图 片 已 经 被 裁剪 )。 我 们 只 能 看 到 
topics.gif 图 片 的 一 部 分 一 一 它 的 第 一 个 100 像素 宽 的 部 分 ， 如 图 10-9 所 示 。 
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图 10-9 


接 下 来 要 解决 的 问题 是 , 让 这 个 网 页 对 用 户 的 操作 行为 做 出 正确 的 响应 。 我 们 想 在 用 户 把 鼠 
标 指 针 基 停 在 某 个 链接 上 时 , 把 topics.gif 图 片 中 与 之 对 应 的 那个 部 分 显示 出 来 。 这 是 一 种 行为 
上 的 变化 : 用 JavaScript 和 DOM 来 实现 再 合适 不 过 了 。 


10.2.4 JavaScript 


我 们 计划 用 moveElement 函数 来 移动 topics.gif 图 片 。 根 据 用 户 正 把 鼠标 指针 悬 停 在 哪个 链 
接 上 ， 我 们 将 这 个 图 片 向 左 或 向 右 移 动 。 
我 们 需要 把 调用 moveElement 函数 的 行为 ， 与 链接 清单 里 每 个 链接 的 onmouseover 事件 关联 起 


来 。 
编写 一 个 prepareS1ideshow 函数 来 完成 这 项 工作 ， 下 面 是 它 的 代码 清单 : 


function prepareSlideshow() { 

// 确保 浏览 器 支持 DOM 方法 
if (!document.getElementsByTagName) return false; 
if (!document.getElementById) return false; 

// 确保 元 素 存在 
if (!document.getElementById(" linklist" )) return false; 
if (!document.getElementById("preview")) return false; 

// 为 图 片 应 用 样式 
var preview = document.getElementById("preview"); 
preview. style.position = "absolute"; 
preview. style.left = "Opx"; 
preview, style.top = "Opx"; 

// 取得 列表 中 的 所 有 链接 
var list = document. getElementById("1inklist"); 
var links = list.getElementsByTagName("a" ); 

// 为 mouseover 事件 添加 动画 效果 
links[0].onmouseover = function() { 

moveElement ("preview" ,-100,0,10); 


links[1].onmouseover = function() { 
moveElement ("preview" ,-200,0,10); 
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links[2].onmouseover = function() { 
moveElement ("preview" ,-300,0,10); 


} 
首先 ，prepareSlideshow 函数 检查 浏览 器 是 否 支 持 它 用 到 的 DOM 方法 : 


if (ldocument.getElementsByTagName) return false; 
if (!document.getElementById) return false; 


接着 ,检查 1inklist 和 preview 元 素 是 否 存在 。 别 忘 了 ，preview 是 topics.gif 图 片 的 id 属 
性 值 : 


if (ldocument.getElementById("linklist")) return false; 
if (ldocument.getElementById("preview")) return false; 


此 后 ， 为 preview 图 片 设 定 一 个 默认 位 置 。 我 将 把 它 的 style.1eft 属性 设置 为 0px， 把 它 的 
style.top 属性 也 设置 为 0px: 


var preview = document.getElementById("preview"); 
preview. style.position = "absolute"; 
preview.style.left = "Opx"; 

preview. style.top = "Opx"; 


请 注意 , 这 并 不 意味 着 topics.gif 图 片 将 出 现在 浏览 器 窗口 的 左上 角 。 它 将 出 现在 它 的 容器 
元 素 , 也 就 是 那个 id 属性 值 是 slideshow 的 div 元素 的 左上 角 。 因为 那个 div 元 素 的 CSS position 
属性 值 是 relative: 如 果 把 position 属性 值 是 absolute 的 元 素 A 放 入 一 个 position 属性 值 是 
relative 的 元 素 B,B 就 成 为 A 的 容器 元 素 , 而 A 将 在 B 的 显示 区 域 里 按 absolute 方式 进行 摆 放 。 
因此 ，preview 图 片 将 出 现在 slideshow 元 素 的 左上 角 一 一 与 这 个 div 元素 的 左边 界 和 上 边界 之 间 
的 距离 都 是 0px。 

最 后 ,把 onmouseover 行为 与 链接 清单 里 的 各 个 链接 关联 起 来 ,首先 ,把 一 个 由 包容 在 1inklist 
元 素 里 的 所 有 a 元 素 构成 的 节点 集合 赋值 给 变量 1inks。 第 一 个 链接 对 应 着 1inks[0]， 第 二 个 链 
接 对 应 着 1inks[1]， 第 三 个 链接 对 应 着 1inks[2]: 


var list = document.getElementById("linklist"); 
var links = list.getElementsByTagName("a"); 


当 用 户 把 鼠标 指针 甚 停 在 第 一 个 链接 上 时 ，moveElement 函数 将 被 调用 执行 。 此 时 ， 它 的 
elementID 参数 的 值 是 preview，final x 参数 的 值 是 -100，final y 参数 的 值 是 0，interval 参数 的 
值 是 10 毫秒 : 


links[0].onmouseover = function() { 
moveElement ("preview",-100,0,10); 


第 二 个 链接 应 该 有 同样 的 行为 一 一 除了 final_x 参 数 的 值 变 成 了 -200: 


links[1].onmouseover = function() { 
moveElement ("preview" ,-200,0,10); 


第 三 个 链接 将 把 preview 图 片 向 左 移动 300 像素 : 


links[2].onmouseover = function() { 
moveElement ("preview",-300,0,10); 
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接 下 来 ， 用 addLoadEvent 函数 调用 prepareS1ideshow 函数 ， 这 将 使 得 后 者 在 页 面 加 载 时 得 到 
执行 并 把 onmouseover 行为 绑 定 到 那 三 个 链接 上 : 
addLoadEvent(prepareSlideshow); 


把 prepareS1ideshow 函数 保存 为 prepareSlideshow.js 文件 并 将 其 放 到 scripts 文件 夹 里 。 把 
moveElement .js 和 addLoadEvent .js 文件 也 放 到 同一 个 文件 夹 中 。 

为 了 从 list.html 文档 里 调用 这 三 个 脚本 ， 还 需要 在 这 个 文档 的 </body> 标 签 之 前 添加 一 些 
<script> 标 签 : 


<!DOCTYPE html> 
<html] lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Web Design</title> 
<link rel="stylesheet" href="styles/layout.css" media="screen" /> 
</head> 
<body> 
<h1i>Web Design</h1> 
<p>These are the things you should know.</p> 
<0] id="linklist"> 
《1i> 
<a href="structure.html">Structure</a> 
</1i> 
<1i> 
<a href="presentation.html">Presentation</a> 
</1i> 
<1i> 
<a href="behavior.html">Behavior</a> 
</1i> 
</01> 
<div id="slideshow"> 
<img src="images/topics.gif" alt="building blocks of web design” id="preview" /> 
</div> 
<script src="scripts/addLoadEvent.js"></script> 
<script src="scripts/moveElement.js"></script> 
<script src="scripts/prepareSlideshow.js"></script> 


</body> 

</html> 

把 1ist.html 文档 加 载 到 一 个 Web 浏览 器 把 [See 一 Web Design | 
鼠标 指针 世 停 在 清单 里 的 某 个 链接 上 就 可 以 看 到 | 令 '， 铺 中 人 "O09 
动画 效果 ， 如 图 10-10 所 示 。 Web Design 

根据 鼠标 指针 正 基 停 在 哪个 链接 上 ， ee 
topics.gif 图 片 的 不 同 部 分 将 进入 我 们 的 视线 。 | 寺 | 


Es Bue e 
不 过 , 事情 好 像 有 点 不 太 对 头 : 如 果 把 鼠标 指 3 io 


针 在 链接 之 间 快 速 地 来 回 移 动 ,动画 效果 将 变 得 混 
乱 起 来 。moveElement 函数 可 能 什么 地 方 有 问题 。 HTML 


Done 


图 10-10 
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10.2.5 ”变量 作用 域 问题 


动画 效果 不 正确 的 问题 是 由 一 个 全 局 变量 引起 的 。 在 把 moveMessage 函数 抽象 化 为 moveElement 


函数 的 过 程 中 ， 我 们 未 对 变量 movement 做 任何 修改 : 


function moveElement(elementID,final x,final y,interval) { 
if (!document.getElementById) return false; 
if (!document.getElementById(elementID)) return false; 
var elem = document.getElementById(elementID); 
var xpos = parseInt(elem.style.1left); 
var ypos = parseInt(elem.style.top); 
if (xpos == final x && ypos == final y) { 
return true; 


if (xpos < final x) { 
Xpos++j 


if (xpos > final x) { 
xpos--; 


if (ypos < final y) { 
ypost++; 


if (ypos > final y) { 
ypos--; 
elem.style.left = xpos + "px"; 
elem.style.top = ypos + "px"; 
var repeat = "moveElement('"+elementID+"","+final x+","+final y+","+interval+")"; 
movement = setTimeout(repeat,interval); 


} 


这 留 下 了 一 个 隐患 : 每 当 用 户 把 鼠标 指针 悬 停 在 某 个 链接 上 , 不 管 上 一 次 调用 是 否 已 经 把 图 
片 移动 到 位 ，moveElement 函数 都 会 被 再 次 调用 并 试图 把 这 个 图 片 移动 到 另 一 个 地 方 去 。 于 是 ， 当 
用 户 在 链接 之 间 快 速 移动 鼠标 时 ，movement 变量 就 会 像 一 条 拔河 绳 那 样 来 回 变 化 ,而 moveElement 


函数 就 会 试图 把 图 片 同时 移动 到 两 个 不 同 的 地 方 去 。 


如 果 用 户 移动 鼠标 的 速度 够 快 ， 积 累 在 setTimeout 队列 里 的 事件 就 会 导致 动画 效果 产生 混 


后 。 为 了 消除 动画 灌 后 的 现象 ， 可 以 用 clearTimeout 函数 清除 积累 在 setTimeout 队列 里 的 寻 


clearTimeout(movement ); 
可 是 ， 如 果 在 还 没有 设置 movement 变量 之 前 就 执行 这 条 语句 ， 我 们 会 收获 一 个 错误 。 
我 不 能 使 用 局 部 变量 : 


var movement = setTimeout(repeat,interval); 


件 : 


如 果 这 样 做 , clearTimeout 函数 调用 语句 将 无 法 工作 , 因为 局 部 变量 movement 在 clearTimeout 


函数 的 上 下 文 里 不 存在 。 


也 就 是 说 ， 既 不 能 使 用 全 局 变量 ,也 不 能 使 用 局 部 变量 。 我 们 需要 一 种 介 平 它们 二 者 之 间 的 


东西 ， 需 要 一 个 只 与 正在 被 移动 的 那个 元 素 有 关 的 变量 。 


只 与 某 个 特定 元 素 有 关 的 变量 是 存在 的 。 事 实 上 ， 我 们 一 直 在 使 用 它们 。 那 就 是 “属性 ”。 
到 目前 为 止 ， 我们 一 直 在 使 用 由 DOM 提供 的 属性 ， 如 element .firstChil1d、element .style， 
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等 等 。JavaScript 允许 我 们 为 元 素 创建 属性 : 
element,property = value 
只 要 愿意 ， 完 全 可 以 创建 一 个 名 为 foo 的 属性 并 把 它 设置 为 "bar". 
element.foo = "bar"; 


这 很 像 是 在 创建 一 个 变量 ,但 区 别 是 这 个 变量 专属 于 某 个 特定 的 元 素 。 


我 们 把 变量 movement 从 一 个 全 局 变量 改变 为 正在 被 移动 的 那个 元 素 (elen 元 素 ) 的 属性 。 这 
样 一 来 ， 就 可 以 测试 它 是 否 已 经 存在 ， 并 在 它 已 经 存在 的 情况 下 使 用 clearTimeout 函数 了 : 


function moveElement(elementID, final x,final y,interval) { 
if (ldocument.getElementById) return false; 
if (!document.getElementById(elementID)) return false; 
var elem = document.getElementById(element1ID); 
if (elem.movement) { 
clearTimeout(elem.movement); 


var xpos = parseInt(elem.style.1left); 
var ypos = parseInt(elem.style.top); 


if (xpos == final x && ypos == final y) { 
return true; 


} 
if (xpos < final x) { 
xpos++j 


} 
if (xpos > final x) { 
Xpos--j 


if (ypos < final y) { 
ypos++; 


if (ypos > final y) { 
ypos--; 


elem.style.left = xpos + "px"; 
elem. style.top = ypos + "px"; 


J 
var repeat = "moveElement('"+elementID+"","+final x+","+final y+","+interval+")"; 


elem.movement = setTimeout(repeat,interval); 


于 是 ， 不 管 moveElement 函数 正在 移动 的 是 哪个 元 素 ， 该 元 素 都 将 获得 一 个 名 为 movement 的 
属性 。 如 果 该 元 素 在 moveElement 函数 开始 执行 时 已 经 有 了 一 个 movement 属性 ， 就 应 该 用 


clearTimeout 函数 对 它 进行 复位 。 这 样 一 来 ， 即 使 因为 用 户 快 速 移动 鼠标 指针 而 
要 向 不 同 的 方向 移动 ， 实 际 执行 的 也 只 有 一 条 setTimeout 函数 调用 语句 。 


使 得 某 个 元 素 需 


请 重新 加 载 1ist.ntml 文件 ,现在 ,在 链接 之 间 快 速 移动 鼠标 指针 不 再 有 任何 问题 。 setTimeout. 
队列 里 不 再 有 积累 的 事件 , 动画 将 随 着 鼠标 指针 在 链接 之 间 的 移动 而 立刻 改变 方向 。 接 下 来 , 再 


来 看 看 我 们 还 可 以 对 动画 效果 做 哪些 改进 。 
10.2.6 ”改进 动画 效果 


在 元 素 到 达 由 final x 和 final_y 参数 给 出 的 目的 地 之 前 ，moveElement 函数 每 次 只 把 它 移 动 
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一 个 像素 (1px) 的 距离 。 移 动 效果 很 平滑 ， 但 移动 速度 未 免 有 些 慢 。 我 们 把 动画 的 移动 速度 加 
快 一 点 儿 。 
仔细 看 看 下 面 这 些 简单 的 代码 ， 它 们 来 自 moveElement .js 文件 : 


if (xpos < final x) { 
Xpos++; 


变量 xpos 是 被 移动 元 素 的 当前 左 位 置 ， 变 量 final_x 是 这 个 元 素 的 目的 地 的 左 位 置 。 上 面 这 
段 代码 的 含义 是 :“ 如 果 变 量 xpos 小 于 变量 final_x， 就 给 xpos 的 值 加 1。 也 就 是 说 ， 不 管 那个 
元 素 与 它 的 目的 地 距离 多 远 ， 它 每 次 只 前 进 一 个 像素 〈1px)。 为 了 增加 趣味 性 ， 我 们 来 改变 它 。 

如 果 那 个 元 素 与 它 的 目的 地 距离 较 远 ， 就 让 它 每 次 前 进 一 大 步 ， 如 果 那 个 元 素 与 它 的 目的 地 
距离 较 近 ， 就 让 它 每 次 前 进 一 小 步 。 

首先 ， 我们 需要 算出 元 素 与 它 的 目的 地 之 间 的 距离 。 如 有 果 xpos 小 于 final_x， 我 们 要 知道 它 
们 差 多 少 。 只 要 用 final_x (目的 地 的 左 位 置 ) 减 去 xpos (当前 左 位 置 ) 就 可 以 知道 答案 : 

dist = final x - xpos; 

这 个 结果 就 是 元 素 还 需要 行进 的 距离 。 我 们 决定 让 元 素 每 次 前 进 这 个 距离 的 十 分 之 一 。 


dist = (final x - xpos)/10; 
xpos = xpos + dist; 


这 将 把 元 素 朝 它 的 目的 地 移动 十 分 之 一 的 距离 。 选 用 十 分 之 一 的 理由 是 为 了 计算 方便 ; 如 果 
你 愿意 ， 选 用 其 他 的 值 也 没 问 题 。 

如 果 xpos 与 final_x 相差 500 像素 ， 变 量 dist 将 等 于 50。xpos 的 值 将 增加 50。 如 果 xpos 与 
final_x 相差 100 像素 ，xpos 的 值 将 增加 10。 

不 过 ， 当 xpos 与 final x 之 间 的 差距 小 于 10 的 时 候 ， 问 题 来 了 : 用 这 个 差距 除 以 10 的 结果 
将 小 于 1， 而 我 们 不 可 能 把 一 个 元 素 移动 不 到 一 个 像素 的 距离 。 

这 个 问题 可 以 用 Math 对 象 的 ceil 方法 来 解决 ， 它 可 以 返回 不 小 于 dist 的 值 的 一 个 整数 。 下 
面 是 ceil 方法 的 语法 : 

Math. ceil (number) 


这 将 把 浮 点 数 number 向 “大 于 ”方向 舍 入 为 与 之 最 接近 的 整数 。 还 有 一 个 与 此 相对 的 floor 
方法 ， 它 可 以 把 任意 浮 点 数 向 “小 于 ”方向 舍 入 为 与 之 最 接近 的 整数 。round 属性 将 把 任意 浮 点 
数 舍 入 为 与 之 最 接近 的 整数 : 


Math.floor(number) 
Math,round(number) 


具体 到 moveElement 函数 , 我 需要 向 “大 于 ”方向 进行 舍 入 。 如 果 错 误 地 选用 了 floor 或 round 
方法 ， 这 个 元 素 将 永远 也 不 会 到 达 目 的 地 : 


dist = Math.ceil((final x - xpos)/10); 
Xpos = xpos + dist; 


这 就 解决 了 xpos 小 于 final_x 时 的 问题 : 
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if (xpos < final x) { 
dist = Math,ceil((final x - xpos)/10); 
xpos = xpos + dist; 


如 果 xpos 大 于 final_x, 在 计算 距离 时 就 应 该 用 xpos 减 去 final_x。 把 这 个 减法 结果 除 以 10， 
向 “大 于 ” 舍 入 为 与 之 最 接近 的 整数 ， 然 后 赋值 给 变量 dist。 此 时 ， 我 们 必须 用 xpos 减 去 dist 
才能 让 元 素 更 接近 它 的 目的 地 : 

if (xpos > final x) { 


dist = Math.ceil((xpos - final x)/10); 
xpos = xpos - dist; 


同样 的 逻辑 也 适用 于 变量 ypos 和 final_y: 


if (ypos < final y) { 
dist = Math.ceil((final y - ypos)/10); 
ypos = ypos + dist; 


if (ypos > final y) { 


Math.ceil((ypos - final y)/10); 
ypos - dist; 


不 要 忘 了 在 xpos 和 ypos 之 后 声明 dist: 


var xpos = parseInt(elem.style.left); 
Var ypos = parseInt(elem.style.top); 
Var dist = 0; 


下 面 是 moveElement 函数 在 经 过 上 述 改 进 后 的 代码 清单 : 


function moveElement (elementID, final x,final y,interval) { 
if (!document.getElementById) return false; 
if (ldocument.getElementById(elementID)) return false; 
var elem = document .getElementById(elementID); 
if (elem.movement) { 
clearTimeout (elem.movement ); 


} 

var xpos = parseInt(elem.style.1left); 
Var ypos = parseInt(elem.style.top); 
var dist = 0; 


if (xpos == final x && ypos == final y) { 
return true; 


if (xpos < final x) { 
Math.ceil((final x - xpos)/10); 
xpos + dist; 


if (xpos > final x) { 
dist = Math.ceil((xpos - final x)/10); 
xpos = xpos - dist; 


if (ypos < final y) { 
Math.ceil((final y - ypos)/10); 
ypos + dist; 


if (ypos > final_y) { 
dist = Math.ceil((ypos - final y)/10); 
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ypos = ypos - dist; 
elem.style.left = xpos + "px"; 
elem.style.top = ypos + "px"; 


Var Tepeat = "moveElement('"+elementID+"',"+final x+","+final y+","+interval+")"; 
elem.movement = setTimeout(repeat,interval); 


把 这 些 修改 保存 到 moveElement .js 文件 。 重 新 加 载 1ist.ntml 就 可 以 看 到 新 的 动画 效果 ， 如 
图 10-11 所 示 。 


Fr 一 
AAA Web Design © 
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图 10-11 


现在 ,动画 效果 给 人 的 感觉 是 更 加 平滑 和 迅速 。 
图 片 将 跳跃 一 大 段 距离 。 随 着 图 片 越 来 越 接近 最 终 目 的 地 ， 它 会 “ 放 慢 ”自己 的 脚步 。 

在 (X)HTML、CSS 和 JavaScript 的 共同 努力 下 ， 预期 的 动画 效果 终 了 实现 了 。 一 切 都 显得 那 
么 完美 ， 但 凡事 都 有 改进 的 余地 ， 这 一 次 也 不 例外 。 


10.2.7 ”添加 安全 检查 


moveElement 函数 现在 的 表现 确实 非常 好 , 但 还 有 一 件 事 让 我 不 放心 : 这 个 函数 的 开头 部 分 需 
要 一 个 假设 : 


var xpos 
var ypos 


看 出 来 了 吗 ? 这 里 需要 假设 elem 元 素 肯定 有 一 个 1eft 样式 属性 和 一 个 top 样式 属性 。 我 其 
实 应 该 先 检查 一 下 这 是 不 是 事实 。 

如 果 elem 元素 的 left 和 /或 top 属性 未 被 设置 ， 我 有 以 下 几 种 选择 。 首 先 ， 可 以 简单 地 就 此 
退出 这 个 国 数 : 


if (lelem.style.left || !elem.style.top) { 
return false; 


parseInt(elem.style.left); 
parseInt(elem.style. top); 
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如 果 JavaScript 没有 读 到 这 些 属性 ， 整 个 函数 将 静 悄 悄 地 结束 运行 而 不 是 报告 出 错 


另 一 种 选择 是 在 moveElement 函数 里 为 left 和 top 属性 分 
性 没有 被 设置 ， 我 将 把 它们 的 默认 值 设置 为 Opx: 


if (lelem.style.left) { 
elem.style.left = "Opx"; 


if (lelem.style.top) { 
elem.style.top = "Opx"; 


下 面 是 moveElement 函数 现在 的 代码 清单 : 


function moveElement(elementID, final x,final y,interval) { 
if (!document.getElementById) return false; 
if (!document.getElementById(elementID)) return false; 
var elem = document.getElementById(elementID); 
if (elem.movement) { 
clearTimeout (elem.movement); 


} 
if (lelem.style.left) { 
elem.style.left = "Opx"; 


if (lelem.style.top) { 
elem.style.top = "Opx"; 

} 

var xpos 

var ypos 

var dist 

if (xpos 
return 


rseInt(elem.style.left); 


p 
parseInt (elem. style.top); 
0; 


a 

a 

各 inal x && ypos == final y) { 
e; 


[| 


ru 


} 

if (xpos < final x) { 
dist = Math.ceil((final x - xpos)/10); 
xpos = xpos + dist; 


if (xpos > final x) { 
dist = Math.ceil((xpos - final x)/10); 
xpos = xpos - dist; 


if (ypos < final y) { 
dist = Math. ca 到 (final _y - ypos)/10); 
ypos = ypos + dist; 


if (ypos > final y) { 
dist = Math. Ce oe - final y)/10); 
ypos = ypos - dist; 


elem.style.left = 
elem.style.top = ypos + "px"; 

Var repeat = "moveElement('"+elementID+ 
elem.movement = setTimeout(repeat, interval); 


} 


Xpos + "px"; 


rn rn 


有 了 刚才 所 说 的 安全 措施 之 后 ， 就 用 不 着 再 明确 地 设置 preview 元 素 的 出 发 点 位 置 了 。 


味 着 可 以 把 prepareSlideshow 函数 里 的 这 两 条 语句 删 掉 : 
preview. style.left = "Opx"; 
preview, style.top = "Opx"; 


+final x+","+final y+", 


} 别 设置 一 个 默认 值 : 如 果 这 文 两 个 属 


+interval+t" )"; 


这 局 
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既然 提 到 了 prepareS1ideshow 函数 ， 就 仔细 看 看 它 是 不 是 还 有 地 方 需要 改进 。 
10.2.8 生成 HTML 标记 
list.html 文档 里 包含 一 些 只 是 为 了 能 够 用 JavaScript 代码 实现 动画 效果 而 存在 的 标记 : 


<div id="slideshow"> 
<img src="images/topics.gif" alt="building blocks of web design”id="preview”/> 
</div> 


如 果 用 户 没 有 启用 JavaScript 支持 ， 以 上 内 容 就 未 免 太 多 余 了 。 这 里 的 div 和 img 元 素 纯粹 
是 为 了 动画 效果 才 “ 塞 ”进来 的 。 既然 如 此 , 与 其 把 这 些 元 素 硬 编码 在 文档 里 , 不 如 用 JavaScript 
代码 来 生成 它们 。 我 们 决定 在 prepareSlideshow.js 文件 里 做 这 些 事情 。 

首先 ， 创 建 div 元素 : 


var Slideshow = document,createElement("div"); 
slideshow,. setAttribute("id","slideshow" ); 


接着 ， 创 建 img 元 素 : 


var preview = document.createElement("img"); 
preview,.setAttribute("src","images/topics.gif"); 
preview.setAttribute("alt","building blocks of web design"); 


preview.setAttribute("id","preview" ); 

把 新 创建 的 img 元 素 放 入 新 创建 的 div 元 素 : 

slideshow.appendChild(preview); 

最 后 ,我们 想 让 这 些 新 创建 的 元 素 紧 跟着 出 现在 链接 清单 的 后 面 。 我 们 将 使 用 来 自 本 书 第 7 
章 的 insertAfter 函数 来 完成 这 一 步 又 : 


var list = document.getElementById("linklist"); 
insertAfter(slideshow,1ist); 


下 面 是 最 终 完 成 的 prepares1ideshow 函数 的 代码 清单 : 


function prepareSlideshow() { 

// 确保 浏览 器 理解 DOM 方法 
if (ldocument.getElementsByTagName) return false; 
if (ldocument.getElementById) return false; 

// 确保 元 素 存在 
if (ldocument.getElementById("linklist")) return false; 
Var slideshow = document.createElement("div"); 
slideshow.setAttribute("id","slideshow"); 
Var preview = document.createElement("img"); 
preview,.setAttribute("src","images/topics .gif"); 
preview,.setAttribute("alt","building blocks of web design"); 
preview.setAttribute("id","preview"); 
slideshow.appendChild(preview); 
Var list = document.getElementById("linklist"); 
insertAfter(slideshow,1ist); 

// 取得 列表 中 的 所 有 链接 
var links = list.getElementsByTagName("a"); 

// 为 mouseover 事件 添加 动画 效果 
links[0].onmouseover = function() { 

moveElement ("preview" ,-100,0,10); 


} 


届 
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links[1].onmouseover = function() { 
moveElement ("preview" ,-200,0,10); 


links[2].onmouseover = function() { 
moveElement ("preview" ,-300,0,10); 


} 
} 
addLoadEvent (prepareSlideshow); 


接 下 来 , 还 需要 对 1ist.html 文件 做 一 些 修改 : 删除 id="slideshow" 的 div 元素 和 id="preview" 
的 图 片 ， 添 加 一 组 <script> 标 签 来 调用 insertAfter .js 文件。 下 面 是 最 终 完 成 的 1ist .ntml 文件 的 
代码 清单 : 

<!DOCTYPE html> 

<htm1 lang="en"> 

<head> 

<meta charset="utf-8" /> 

<title>Web Design</title> 

<link rel="stylesheet" href="styles/layout.css" media="screen” /> 
</head> 

<body> 

<h1>Web Design</h1> 
<p>These are the things you should know.</p> 
<01 id="linklist"> 
<li> 
«a href="structure.html">Structure</a> 
</1i> 
<1i> 
<a href="presentation.html">Presentation</a> 
</1i> 
<1i> 
<a href="behavior.html">Behavior</a> 
</1i> 
</01> 
«script src="scripts/addLoadEvent.js"></script> 
<script src="scripts/insertAfter.js"></script> 
«script src="scripts/moveElement.js"></script> 
«script src="scripts/prepareSlideshow.js"></script> 
</body> 
</html> 


把 insertAfter 国 数 写 入 insertAfter.js 文件 ， 并 把 它 放 入 Scripts 文件 夹 . 


function insertAfter(newElement, targetElement) { 
var parent = targetElement.parentNode; 
if (parent.lastChild == targetElement) { 
parent.appendChild(newElement); 
} else { 
parent.insertBefore(newElement, targetElement.nextSibling); 


} 

还 需要 对 样式 表 文 件 layout .css 做 一 些 修改 。 因 为 我 们 刚才 从 prepares1ideshow.js 文件 里 删 
除了 如 下 所 示 的 一 行 代码 : 

preview,style.position = "absolute"; 


所 以 现在 需要 把 以 下 样式 声明 添加 到 layout .css 样式 表 里 ， 这 才 是 样式 信息 应 该 属于 的 地 


> 


万 : 


200 第 10 章 用 JavaScript 实 现 动画 效果 


#slideshow { 
width: 100px; 
height: 100px; 
position: relative; 
overflow: hidden; 


#preview { 
position: absolute; 


现在 ,在 Web 浏览 器 里 刷新 1ist.html 文档 。 从 表面 上 看 ， 功 能 还 是 那些 功能 , 行为 还 是 那 
些 行为 。 但 经 过 上 述 改进 之 后 ,这 份 文档 的 结构 层 、 表 示 层 和 行为 层 已 经 分 离 得 更 加 彻底 了 。 如 
果 在 禁用 了 JavaScript 支持 功能 的 情况 下 浏览 这 份 文档 ， 动 画图 片 将 根本 不 会 出 现 。 

我 们 用 JavaScript 实现 的 动画 功能 非常 完善 。 如 果 启 用 了 JavaScript, 这 个 页 面 就 能 根据 用 户 
的 操作 动作 通过 动画 效果 向 用 户 提供 一 些 赏 心 悦 目 的 视觉 反馈 ， 如 果 没 有 启用 JavaScript， 动 画 
功能 将 按照 我 们 安排 的 平稳 退化 保持 静默 ， 不 影响 用 户 的 浏览 体验 。 

如 果 想 进一步 加 强 链 接 清 单 和 动画 图 片 的 视觉 联系 ,可 以 通过 修改 layout .css 文件 去 实现 一 
些 更 精彩 的 效果 。 比 如 说 ， 可 以 把 动画 图 片 的 显示 位 置 从 链接 清单 的 下 方 挪 到 它 的 旁边 。 如 果 想 
让 动画 部 分 更 加 突出 的 话 ， 还 可 以 给 它 加 上 一 个 边框 。 


10.3 小 结 


在 本 章 里 , 我 们 首先 对 “动画 ”进行 了 定义 : 随时 间 变 化 而 改变 某 个 元 素 在 浏览 器 窗口 里 的 
显示 位 置 。 通 过 结合 使 用 CSS-DOM 和 JavaScript 的 setTimeout 函数 ， 很 容易 实现 一 个 简单 的 动 
画 。 

从 技术 上 讲 ， 实 现 动 画 效果 并 不 困难 ， 问 题 是 在 实践 中 应 不 应 该 使 用 动画 。 动 画 技术 可 以 让 
我 们 创建 出 很 多 种 非常 酷 的 效果 ， 但 那些 四 处 移动 的 元 素 对 用 户 有 用 或 有 帮助 的 场合 却 并 不 多 。 
不 过 ， 我 们 刚才 创建 的 JavaScript 动画 却 是 一 个 例外 。 我 们 花 了 不 少 功夫 才 让 它 有 了 平 请 的 动画 
效果 和 平稳 退化 ,最 终 的 结果 证 明 我 们 付出 的 努力 是 非常 值得 的 。 我 们 现在 有 了 一 个 通用 性 的 函 
数 ， 它 可 以 在 确 有 必要 创建 动画 效果 时 帮 上 大 忙 。 

下 一 章 将 介绍 最 新 的 HTML5， 你 将 学 会 如 何 利 用 它 的 新 属性 。 


HTMLS 


本 章 内 容 

口 什么 是 HTML5 

O 今天 怎么 使 用 HTML5 

口 对 HTML5 中 一 些 特性 的 简单 介绍 ， 包 括 Canvas、 视 频 、 音 频 和 表单 


本 书 开始 时 介绍 了 JavaScript 的 历史 以 及 DOM 的 起 源 。 今 天 ，HTMLS5 的 出 现 使 得 DOM、 
样式 和 行为 之 间 的 界限 变 得 模糊 了 。 因 此 ,现在 让 我 们 来 看 看 HTMLS 到 底 有 哪些 新 特性 ， 看 看 
未 来 的 发 展 方向 在 哪里 。 


11.1 HTML5 简介 


HTMLS5 是 HTML 语言 当前 及 未 来 的 新 标准 。HTML 规范 从 HTML4 到 XHTML， 再 到 Web 
Apps 1.0， 最 后 又 回 到 HTML5， 整 个 成 长 历程 充满 了 艰 斑 和 和 争议。HTMLS5S 问世 背后 的 明争暗斗 
活 像 一 部 肥皂 剧 (这 部 戏 中 的 一 些 情 市 至 今 还 在 延续 )， 不 管 怎样 ， 结 局 还 是 圆满 的 。 我 们 有 理 
由 为 HIMLS 欢呼 ， 因 为 多 种 技术 统一 的 趋势 日 益 明 朗 ， 它 标志 着 下 一 代 Web 的 帷幕 正在 缓 缓 
拉 开 。 

谈 到 Web 设计 ， 最 准确 的 理解 是 把 网 页 看 成 三 个 

(1) 结构 层 

(2) 样式 层 

(3) 行为 层 

这 三 个 层 分 别 对 应 不 同 的 技术 ， 分 别 是 : 

(1) 超 文 本 标记 语言 (HTML) 

(2) 层 县 样式 表 (CSS) 

(3) JavaScript 和 文档 对 象 模型 (DOM ) 

没 错 ， 你 可 以 说 还 能 再 加 一 层 ， 也 就 是 浏览 器 的 JavaScript API， 包括 cookie 和 window 等 ”。 

但 随 着 HTML5 的 到 来 ,上 面 所 说 的 结构 层 、 样 式 层 和 行为 层 ( 以 及 浏览 器 中 的 JavaScript API) 


Ml 


© 
[els 


里 指 的 是 “浏览 器 对 象 模型 ”(BOM，Broswer Object Model) 。 一 一 译 者 注 
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已 经 被 整 装 到 一 个 小 集合 中 ， 不 过 也 仅仅 就 是 一 个 集合 。HTMLS 在 这 个 集合 中 提供 了 几 种 旗 鼓 
相当 的 技术 ， 让 我 们 可 以 按 需 取 用 或 者 调用 。 

例如 ,在 结构 层 中 ,HTMLS 添加 了 新 的 标记 元 素 , 如 <section>、<article>、<header> 和 <footer>。 
本 书 并 不 想 在 这 里 讨论 这 些 新 的 标签 ， 想 知道 所 有 新 标记 的 读者 请 查看 规范 (http:/www.w3.org/ 
TR/html5/)。HTMLS5 还 提供 了 更 多 交互 及 媒体 元 素 ， 例 如 <canvas>、<audio> 和 <video>。 表 单 得 到 
了 加 强 ， 新 增 了 颜色 拾取 器 、 数 据 选择 器 、 滑 动 条 和 进度 条 。 除 此 之 外 ， 你 会 发 现 其 中 很 多 新 元 
素 都 还 带 有 自己 的 JavaScript 和 DOM API。 

在 行为 层 ，HIMLS 规定 了 DOM 中 每 个 新 元 素 的 交互 方式 ， 以 及 新 的 API。 例 如 ， 我 们 可 
以 自 定义 <video> 元 素 的 控件 ， 改 变 其 播放 方式 ，<form> 元 素 则 支持 进度 控制 ， 而 在 <canvas> 元 素 
中 ， 可 以 绘制 各 种 图 形 和 添加 图 片 及 其 他 对 和 象 。 

不 仅 是 标记 和 行为 , 表现 层 同样 也 得 到 了 改进 。CSS 3 的 多 个 模块 蝇 括 了 高 级 选择 器 、 渐 变 、 
变换 ,还 有 动画 。 这 些 模块 完全 可 以 替代 很 多 过 去 需要 编写 脚本 才能 实现 的 效果 ， 比 如 动画 和 定 
位 元 素 , 这 些 效果 在 表现 层 中 的 位 置 举 足 轻重 。 虽然 要 实现 高 级 动画 效果 仍然 免不了 要 编写 很 多 
脚本 ， 但 很 多 简单 的 交互 应 该 可 以 跟 计 时 器 或 JavaScript 说 拜拜 了 。 

最 后 ， 新 JavaScript API 还 包括 其 他 很 多 模块 ， 比 如 Geolocation、Storage、Drag-and-Drop、 
Socket 以 及 多 线程 等 。 

不 管 打 算 使 用 HTMLS5 的 什么 新 特性 ， 请 记 住 : 你 费 尽心 思 编 写 的 (X)HTML 代码 仍然 有 效 。 
为 了 与 HIMLS 兼容 , 你 要 做 的 只 有 一 小 点 改变 。 想 不 想 把 绝 大 多 数 文档 都 “升级 ”到 HTML5? 
好 ， 就 把 文档 类 型 声明 改 成 <!DOCTYPE html> 即 可 。 

假如 你 想 让 自己 的 页 面 验证 无 误 ， 当然 还 要 把 一 些 废弃 的 元 素 赫 换 掉 ,如 把 <acronym> 替 换 成 
<abbr>。 不 过 要 知道 ， 验 证 只 是 一 个 工具 ， 它 有 助 于 你 成 为 一 个 好 程序 员 ， 但 它 却 不 是 我 们 追求 
的 理想 。 此 外 ，<sectiom> 或 <article> 等 新 元 素 在 一 些 老 浏 览 器 中 也 许 不 会 表现 得 很 好 ,但 浏览 器 
的 版 本 越 新 ， 它 们 的 表现 就 会 越 好 。 

第 8 章 我 们 已 经 说 过 了 ，HIML (包括 HTML5) 与 XHTML 相 比 ， 对 语法 的 要 求 要 宽松 得 
多 。HTML5 的 目标 是 和 已 有 的 HTML 及 XHTML 文档 全 部 兼容 ， 无 论 怎么 标记 文档 ， 无 论 遵循 
什么 编码 规则 ， 都 由 你 说 了 算 。 想 要 关闭 所 有 标签 并 且 做 到 标记 格式 良好 吗 ? 请 便 。 你 懒得 关闭 
所 有 标签 ， 嫌 那样 做 太 彩 类 了 一 一 没 问 题 。 事 实 上 ， 就 连 下 面 这 个 “ 缺 斤 短 两 ”的 HIMLS 文档 ， 
也 可 以 完美 地 通过 验证 〈 但 愿 不 会 吓 着 你 ) : 


<!DOCTYPE html> 

<meta charset=utf-8 /> 

<title>This is a valid HTML5 document</title> 
<p>Try me at http://validator.w3.0rg/check</p> 


抛 开 验证 成 功 与 否 不 谈 , 如 果 你 想 让 自己 的 工作 显得 更 专业 , 我 猜 你 一 定 会 自己 加 上 <html>、 
<head> 和 <body 汪 一 一 无 论 浏 览 器 会 不 会 为 你 添加 这 些 基本 的 结构 化 元 素 。 

那么 , HTMLS5 离 我 们 还 有 多 远 ? 现在 我 们 就 可 以 使 用 这 些 令 人 激动 的 新 特性 了 吗 ? 答案 是 : 
可 以 。 不 过 有 个 前 提 一 一 尽 可 能 提前 检查 浏览 器 对 HTML5 的 支持 情况 。 然 而 ， 检 查 浏 览 器 是 否 
支持 全 部 HTML5 特性 是 不 可 能 的 ， 我 们 说 过 ，HTML5 现在 是 一 个 集合 ， 不 是 一 个 全 有 或 全 无 
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的 概念 。 因 此 ， 可 以 利用 一 些 可 靠 的 特性 检测 ， 或 者 使 用 本 书 通 篇 都 在 强调 的 渐进 增强 机 制 。 
11.2 来 自 朋 友 的 忠告 
如 果 你 今天 就 想 用 HTML5， 那 太 好 了 ， 赶紧 吧 ! 在 作出 决定 之 后 , 我 想 向 你 推荐 一 个 工具 : 


Modernizr" 。 
Modernizr (http://www.modernizr.com/) 是 一 个 开源 的 JavaScript 库 , 利用 它 的 富 特 性 检测 功能 ， 
可 以 对 HTMLS5 文档 进行 更 好 的 控制 。Modernizr 不 会 给 你 添加 浏览 器 不 支持 的 特性 ， 比 如 , 在 IE6 
中 就 没有 办 法 使 用 本 地 存储 。Modernizr 能 做 的 是 为 你 提供 一 些 不 同 的 CSS 类 名 以 及 特性 检测 
(feature-detection) 属性 。 要 想 现在 使 用 HTML5，Modernizr 是 必 不 可 少 的 ， 它 的 用 途 也 不 止 于 此 。 
在 文档 中 伐 入 Modernizr 之 后 ， 它 会 随 着 页 面 加 载 变 一 些小 戏法 。 
首先 ， 它 会 修改 <html> 的 class 属性 ， 基 于 可 用 的 HIMLS 特性 添加 额外 的 类 名 。 要 使 用 
Modernizr 编写 文档 ， 通 常 都 要 给 <html> 元 素 添加 一 个 no-js 类 : 


<htm] class="no-js"> 


利用 这 个 类 ， 可 以 在 浏览 器 不 支持 JavaScript 的 情况 下 应 用 CSS 样式 。 


.no-js selector { 
style properties 
} 


然后 ，Modemizr 会 检测 浏览 器 可 能 支持 的 各 种 特性 ， 并 相应 地 添加 类 名 。 如 有 果 浏 览 器 支持 
某 些 特性 ， 经 它 修 改 后 的 类 名 大 致 如 下 所 示 : 


<htm] class="js canvas canvastext geolocation crosswindowmessaging websqldatabase indexeddb 
hashchange historymanagement draganddrop websockets rgba hsla multiplebgs backgroundsize 
borderimage borderradius boxshadow opacity cssanimations csscolumns cssgradients 
cssreflections csstransforms csstransforms3d csstransitions video audio localstorage 
sessionstorage webworkers applicationcache svg smil svgclippaths fontface"> 


如 果 浏 览 器 不 支持 某 些 特性 ， 经 它 修改 后 的 类 名 应 该 如 下 所 示 : 


<html class="js no-canvas no-canvastext no-geolocation no-crosswindowmessaging no- 
websqldatabase no-indexeddb no-hashchange no-historymanagement no-draganddrop no-websockets 
no-rgba no-hsla no-multiplebgs no-backgroundsize no-borderimage no-borderradius no-boxshadow 
no-opacity no-cssanimations no-csscolumns no-cssgradients no-cssreflections no-csstransforms 
no-csstransforms3d no-csstransitions no-video no-audio no-localstorage no-sessionstorage no- 
webworkers no-applicationcache no-svg no-smil no-svgclippaths no-fontface"> 


当然 ， 实 际 情况 是 浏览 器 可 能 会 支持 部 分 特性 ， 而 不 支持 另 一 些 特 性 。 这 时 候 ， 类 名 中 就 会 
间或 出 现 feature 和 no-feature。 
根据 这 些 类 名 ， 可 以 在 CSS 中 定义 相应 的 增强 和 退化 版 本 ， 改 善 用 户 体 验 : 


.multiplebgs article p { 
/# 为 支持 多 背景 浏览 丹 编 写 的 样式 */ 
} 
.no-multiplebgs article p { 
0 es 


@ 读者 也 可 以 从 GitHub (https://github.com/Modernizr/Modernizr) 下 载 Modernizr。 


译 者 注 
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类 似 地 ，Modernizr 库 也 提供 了 JavaScript 特性 检测 对 象 ， 可 以 在 DOM 脚本 中 直接 使 用 : 


if ( IModernizr.inputtypes.date ) { 
/* 不 支持 本 地 数据 ， 使 用 自 定义 的 数据 选择 脚本 */ 
cieateDatepicker(document .getElementById('birthday' )); 


Modernizr 还 可 以 帮 一 些 老 旧 的 浏览 器 处 理 <section> 和 <article> 这 样 的 新 元 素 。 有 的 读者 可 
能 还 不 知道 ， 其 实 你 可 以 在 大 多 数 浏 览 器 中 创建 类 似 <foo> 这 样 的 元 素 ， 然 后 再 为 该 元 素 应 用 样 
式 一 一 只 要 你 不 在 乎 验证 结果 就 无 所 请 。 对 于 这 些 浏览 器 来 说 , 新 的 HTMLS5 元 素 (如 <section>) 
也 照样 可 以 拿 来 就 用 。 为 使 用 这 些 新 元 素 ， 你 要 做 的 就 是 为 它们 指定 一 些 基本 的 样式 ， 以 便 浏 览 
器 可 以 把 它们 当做 块 元 素来 呈现 : 


article, aside, footer, header, hgroup, nav, section { 
display: block; 


唯一 的 特例 就 是 了 下。 要 在 正 中 添加 未 知 元 素 ， 必 须 先 使 用 类 似 下 面 的 JavaScript 代码 来 创 
建 该 元 素 : 

document. createElement('article'); 

Modernizr 可 以 寿 我 们 来 做 这 件 事 ; 但是， 这 并 不 意味 着 你 就 可 以 放心 地 使 用 <video> 元 素 般 
入 视频 了 。Modernizr 不 会 为 我 们 添加 底层 的 JavaScript 及 DOM API， 或 者 与 这 些 元 素 相关 的 其 
他 特性 。 

使 用 Modernizr 非常 简单 ， 从 http:/www.modernizr.comy/ 下 载 它 ， 将 在 文档 的 <head> 中 添加 该 
脚本 : 


<SCTipt src="modernizr-1.5.min,.js"></script> 


一 定 要 把 这 个 脚本 放 在 <head> 元 素 中 。 虽 然 这 与 第 5 章 建 议 的 不 一 致 ， 但 这 样 做 有 特殊 的 原 
因 。 把 Modernizr 放 在 文档 开头 ， 可 以 在 加 载 其 他 标记 之 前 先 加 载 它 ， 以 便 它 在 文档 呈现 之 前 能 
够 创建 好 新 的 HTML5 元 素 。 要 是 把 它 放 到 了 文档 的 末尾 ， 那 么 等 不 到 Modernizr 发 挥 作用 ， 浏 
览 器 就 已 经 开始 呈现 文档 并 应 用 样式 了 。 
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为 了 让 读者 朋友 尝 尝 鲜 ， 下 面 我 们 就 介绍 一 些 有 关 Canvas、 视 频 / 音 频 以 及 表单 的 例子 ， 看 
一 看 HIMLS 都 提供 了 什么 API。 要 想 试 验 以 下 的 示例 ， 需 要 下 列 浏览 器 。 
口 苹果 Safari 5+ 
谷歌 Chrome 6+ 
Mozilla Firefox 3.6+ 
Opera 10.6+ 


微软 IE 9+ 
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11.3.1 Canvas 


每 个 浏览 器 都 可 以 显示 静态 图 片 。 通 过 GIF 可 以 实现 一 些 动画 ,或 者 使 用 CSS 加 JavaScript 
也 能 变化 一 些 样式 , 但 仅 此 而 已 。 要 想 与 静态 图 片 交 互 可 就 难 上 加 难 了 。HTML5 的 <canvas> 元 素 
让 这 一 切 成 为 了 历史 ， 通 过 它 可 以 动态 创建 和 操作 图 形 图 像 。 

在 网 页 中 支 起 一 块 “ 画 布 ”(canvas) 很 简单 : 


<canvas id="draw-in-me” width="120" height="40"> 
<p>Powered By HTML5 canvas</p> 


</canvas> 

在 这 张 “ 画 布 ” 上 作画 嘛 ， 可 就 是 另外 一 回 事 了 。 要 了 解 详细 的 绘画 方法 ， 请 参考 <canvas> 
元 素 的 规范 (http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element. 
html) 。 不 过 从 本 质 上 来 讲 ，<canvas> 涉 及 的 数学 及 定位 的 概念 与 Adobe Illustrator 等 基于 矢量 的 
图 形 软件 或 者 基于 矢量 的 编程 语言 没有 太 大 的 差别 。 


注意 ”如果 读者 使 用 过 Tllustrator, 可 以 试 试 使 用 Ai->Canvas 插件 (http:/visitmix.conylabs/ai2canvas/) ， 
虽然 作为 “所 见 即 所 得 ”的 编辑 器 ， 免 不 了 会 在 输出 中 生成 一 些 完 余 的 东西 ， 但 通过 手 
工 编 辑 还 是 能 得 到 最 佳 效 果 的 。 


下 面 这 个 例子 利用 <canvas> 画 一 个 圆 角 小 黑 盒 子 ， 带 有 2 像素 宽 的 白色 描 边 


function draw() { 

Var canvas = document .getElementById( "draw-in-me ); 

if (canvas.getContext) { 
var ctx = canvas.getContext('2d'); 
ctx.beginpath(); 
ctx.moveTo(120.0,32.0); 
ctx.bezierCurveTo(120.0, 36.4, 116.4, 40.0, 112.0, 40.0); 
ctx.lineTo(8.0,40.0); 
ctx.bezierCurveTo(3.6, 40.0, 0.0, 36.4, 0.0, 32.0); 
ctx.lineTo(0.0, 8.0); 
ctx.bezierCurveTo(0.0, 3.6, 3.6, 0.0, 8.0, 0.0); 
ctx.lineTo(112.0, 0.0); 
ctx.bezierCurveTo(116.4, 0.0, 120.0, 3.6, 120.0, 8.0); 
ctx.lineTo(120.0, 32.0); 
ctx.closepath(); 
ctx.fill(); 
ctx.lineWidth = 2.0; 
ctx.strokeStyle = "rgb(255, 255, 255)"; 
ctx.stroke(); 


} 


window.onload = draw; 


在 这 个 例子 中 ， 变 量 ctx 0 (context) 。 所 谓 绘 图 空间 ， 在 这 里 就 是 
一 个 平面 二 维 的 绘图 表面 ， 其 原点 (0,0) 位 于 <canvas> 的 左上 角 。 在 这 个 绘 Ce 越 
往 右 x 的 值 越 大 ， 越 往 下 y 的 值 越 大 。 通过 在 绘图 空间 中 指定 坐标 点 ， 可 以 绘制 出 各 种 二 维 的 形 
状 和 线条 。 在 绘制 线条 时 ， 还 可 以 添加 不 同 的 填充 及 描 边 样式 。 
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图 11-1 是 在 Chrome 中 显示 的 结果 ; 


图 11-1 


当然 , 这 个 例子 还 很 简陋 ,例子 中 的 <canvas> 元 素 使 用 了 与 其 他 2D 绘图 库 相 似 的 API。 这 里 
使 用 了 几 个 点 和 曲线 从 一 个 点 到 另 一 个 点 创建 并 绘制 出 了 一 条 路 径 ， 但 <canvas> 可 不 仅仅 能 够 用 
来 绘制 矢量 路 径 ， 还 可 以 通过 它 来 显示 和 操作 位 图 图 像 。 

比如 说 ， 我 们 可 以 使 用 <canvas> 对 象 在 浏览 器 中 把 一 幅 彩 色 图 片 变 成 灰 度 图 片 。 然 后 ， 当 用 
户 的 鼠标 基 停 到 图 片上 面 时 ， 再 把 它 切换 回 原始 的 彩色 图 片 。 

先 创 建 一 个 HTML 文件 , 命名 为 grayscale.html， 其 中 有 一 幅 图 像 ， 与 脚本 位 于 同一 个 域 中 。 
这 个 页 面 里 也 使 用 了 Modernizr: 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Grayscale Canvas Example</title> 
«script src="scripts/modernizr-1.6.min.js"></script> 
</head> 
<body> 
<img src="images/avatar.png” id="avatar” title="Jeffrey Sambells" alt="My Avatar"/> 
«<script src="scripts/grayscale.js"></script> 
</body> 
</html> 


再 创建 一 个 grayscale.js 文件 ， 并 在 其 中 添加 如 下 脚本 : 
function convertToGS(img) { 


// 如 果 浏 览 器 不 支持 <canvas> 就 返回 


if (!Modernizr.canvas) return; 
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// 存 储 原始 的 彩色 版 


img.color = img.src; 


// 创建 灰 度 版 
img.grayscale = createGSCanvas (img); 


// 在 mouseover/out 事件 发 生 时 切换 图 片 
img.onmouseover = function() { 
this.src = this.color; 


img.onmouseout = function() { 
this.src = this.grayscale; 


img.onmouseout(); 

} 

function createGSCanvas(img) { 
var canvas=document.createElement("canvas"); 
canvas.width= img.width; 
canvas.height=img.height; 


var ctx=canvas.getContext("2d"); 
ctx.drawImage(img,0,0); 


// 注 意 : getImageData 只 能 操作 与 脚本 位 于 同一 个 域 中 的 图 片 
var 5C = ctx.getImageData(0, 0, img.width, img.height); 
for (i=0; icc.height; i++) { 

for (j=0; j<c.width; j++) { 


Var X = (i*4) * c.width+ (j*4); 

var r = C.data[x]; 

var g = ¢.data[x+1]; 

Var b = c.data[x+2]; 

c.data[x] = c.data[x+1] = c.data[x+2] = (r+g+b)/3; 
} 


ctx.putImageData(c,0,0,0,0, c.width, c.height); 
return canvas.toDataURL(); 


} 


// 添加 1oad 事 件 。 如 果 有 其 他 脚本 ， 可 以 使 用 addLoadEvent 函数 
window.onload = function() 1{ 
convertToGS(document .getElementById('avatar' )); 


} 


注意 在 从 图 片 之 类 的 文件 中 读 取 数据 时 ,不 同 浏览 器 有 不 同 的 安全 考虑 。 为 了 保证 这 个 例子 
正常 运行 ,必须 在 同一 个 站 点 中 提供 图 片 和 文档 。 而且， 就 算 在 本 地 硬盘 中 使 用 file 协 
议 加 载 这 个 页 面 ， 例 子 也 无 法 运行 。 虽然 可 以 修改 浏览 器 的 安全 设置 ， 但 我 还 是 建议 把 
这 个 例子 的 相关 文件 都 上 传 到 Web 服 务 器 中 。 


页 面 加 载 后 ， 脚 本 通过 在 convertToGS 函数 中 应 用 onmouseover 和 onmouseout 事件 处 理 国 数 来 
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修改 avatar.png 图 片 。 
img.color = img.src; 
img.grayscale = createGSCanvas(img); 
img.onmouseover = function() { 
this.src=this.color; 


img.onmouseout = function() { 
this.src=this.grayscale; 


上 述 事 件 处 理 函 数 会 切换 保存 在 图 片 的 src 属性 中 的 原始 彩色 版 ， 以 及 createGSCanvas 函数 
创建 的 灰 度 版 。 

为 了 在 createGSCanvas 函数 中 把 彩色 图 片 转换 为 灰 度 图 片 ,我 们 创建 了 一 个 新 的 canvas 元 素 ， 
然后 在 其 绘图 环境 中 绘制 了 彩色 图 片 : 


Var canvas=document.createElement("canvas"); 
canvas ,width= img.width; 
canvas .height=img.height; 


Var ctx=canvas.getContext("2d"); 
ctx.drawImage(img,0,0); 
接 下 来 再 取得 原始 的 图 像 数 据 ， 循 环 遍历 其 中 的 每 一 个 像素 ， 将 每 个 彩色 像素 的 红 、 绿 、 
蓝 彩 色 成 分 求 平均 值 ， 得 到 对 应 彩色 值 的 灰 度 值 。 
var C = ctx.getImageData(0, 0, img.width, img.height); 
for (i=0; ixc.height; i++) { 
for (j=0; jx<c.width; j++) { 

Var x = (i*4) * c.width+ (j*4); 

var r = ¢.data[x]; 

var g = Cc.data[x+1]; 


var b = c.data[x+2]; 
c.data[x] = c.data[x+1] = c.data[x+2] = (r+g+b)/3; 


} 
剩 下 的 工作 就 是 把 灰 度 数据 再 放 回 到 画布 的 绘图 环境 中 , 并 返回 原始 的 图 像 数 据 作为 新 灰 度 
图 片 的 源 。 


Ctx,.putImageData(C，0，0，0，0，c.width，c.height); 
return canvas.toDataURL(); 


这 样 ， 即 使 我 们 只 提供 彩色 版 图 片 ， 也 可 以 在 该 图 像 的 彩色 版 与 灰 度 版 之 间 切 换 了 。 

为 什么 使 用 <canvas> 而 不 是 多 张 图 片 呢 ? 只 有 在 基于 用 户 操作 实现 交互 时 ,使 用 <canvas> 的 优 
势 才 会 显现 出 来 。 以 前 ， 要 想 在 浏览 器 中 实现 高 级 的 图 片 交 互 功能 ， 只 能 依靠 Flash 或 Silverlight 
这 样 的 插件 。 今 天 ， 有 了 <canvas>， 就 可 以 在 浏览 器 窗口 绘制 任何 对 象 、 任 何 像素 了 。 当 然 ， 还 
能 通过 它 来 操作 图 像 ， 或 者 创建 令 人 眼花 练 乱 的 界面 元 素 。 可 是 ， 就 跟 使 用 Flash 一 样 ， 也 绝对 
不 能 滥用 <canvas>。 换 句 话 说 ， 即 使 你 真 的 可 以 在 一 个 <canvas> 元 素 里 创建 一 个 站 点 , 也 不 表示 你 
应 该 那样 做 。 

此 外 ， 你 还 得 考虑 到 那些 使 用 屏幕 阅读 器 或 其 他 辅助 浏览 技术 的 用 户 。HTMLS 的 这 个 
<canvas> 元 素 跟 Flash 一 样 ， 都 不 具备 可 访问 性 ， 会 给 那些 用 户 带 来 同样 的 烦恼 。 记 住 ， 不 要 被 
先进 技术 的 光环 左右 了 你 的 心智 ， 必 要 时 还 要 留 一 手 。 
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11.3.2 ”音频 和 视频 


谈 到 HTML5 的 新 元 素 ， 人们 议论 最 多 的 候 怕 就 要 数 <video> 和 它 的 又 兄弟 <audio> 了 。 这 两 个 
元 素 让 HTML 具有 了 原生 视频 和 音频 的 能 力 ， 但 也 带 来 了 一 些 不 好 处 理 的 问题 。 

在 HTML5 之 前 ， 向 网 页 中 租 入 视频 需要 用 到 一 大 堆 重 复 的 <object> 和 <embed> 元 素 ， 其 中 一 
些 在 HTML4 中 甚至 都 无 法 通过 有 效 性 验证 。<object> 可 以 引用 各 种 影片 播放 器 ,例如 QuickTime、 
RealPlayer 或 Flash， 并 使 用 这 些 插件 在 浏览 器 中 播放 影片 。 举 个 例子 ， 以 下 就 是 眶 入 Flash 影片 
的 代码 (想必 你 一 定 觉得 很 眼熟 ) : 


<object classid="clsid:d27cdb6e-ae6d-11cf-96b8- 
444553540000” width="100" height="100" 
codebase="http://fpdownload.adobe.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0"> 
<param name="movie” value="moviename,swf"> 

<param name="play" value="true"> 

<param name=" loop" value="true"> 

<param name="quality” value="high"> 

<embed src="moviename.swf" width="100" height="100" 
play="true" loop="true" quality="high" 
pluginspage=" http://get.adobe.com/flashplayer” /> 
</object> 


除了 这 些 代码 之 外 , 第 三 方 插件 也 有 各 自 的 问题 和 局 限 性 。 要 想 让 舱 入 的 代码 发 挥 作用 ， 浏 
览 器 中 必须 安装 相应 的 插件 , 而且 版 本 还 要 合适 。 插 件 是 在 一 个 封闭 的 环境 中 运行 的 , 通过 脚本 
无 法 修改 或 者 操作 视频 内 容 。 如 果 插 件 没 有 提供 API， 插件 运 行 环境 无 异 于 文档 中 的 一 个 独立 王 
国 。 


HTML5S 的 <video> 元 素 为 在 文档 中 租 入 影片 以 及 与 影片 交互 定义 了 一 种 标准 方式 ， 同 时 也 把 
能 入 操作 简化 成 了 一 个 标签 : 
<video src="movie.mp4"> 
<1-- 不 支持 原生 视频 时 的 替代 内 容 --> 
《<a href="movie.mp4">Download movie.mp4</a> 
</video> 


这 里 我 们 戏 入 了 一 段 mp4 视频 ， 并 给 出 了 浏览 器 不 支持 <video> 时 的 替代 下 载 链接 。 
类 似 地 ，<audio> 元 素 的 用 法 也 差不多 : 

<audio src="sound.ogg"> 

<!- -不 支持 音频 时 的 替代 内 容 --y 


<a href="sound.ogg" >Download sound.ogg</a> 
</audio> 


简单 、 朴 素 ， 还 很 吸引 人 ， 是 吗 ? 除非 它 总 能 如 此 …… 

1. 也 有 混乱 的 时 候 

让 人 失望 的 是 ，HTML5 的 <video> 和 <audio> 元 素 也 有 那么 点 小 问题 。 这 两 个 标签 都 很 简单 ， 
也 都 有 相应 的 属性 用 于 显示 播放 控件 或 更 改 播放 设置 ， 但 是 它 并 未 说 明文 持 哪些 视频 格式 .。 

要 搞 清楚 有 关 视 频 格式 的 问题 ， 必 须 从 什么 是 视频 说 起 。 

像 movie.mp4 这 样 的 视频 ， 其 实 是 一 个 包含 很 多 东西 的 容器 。 扩 展 名 mp4 表示 视频 是 使 用 基 
于 苹果 QuickTime 技术 的 MPEG4 打包 而 成 的 。 这 个 容器 规定 了 不 同 的 音频 和 视频 轨道 在 文件 中 
的 位 置 ， 以 及 其 他 与 回放 相关 的 特性 。 其 他 容器 还 有 m4v ( 另 一 个 MPEG4 扩 展 名 )、avi (Audio 
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Video Interleave， 音 频 视 频 交 错 ) 、flv (Flash Video) ， 等 等 。 

在 每 个 影片 容器 中 ,音频 和 视频 轨道 都 使 用 不 同 的 编 解 码 器 来 编码 。 编 解码 器 决定 了 浏览 器 
在 播放 时 应 该 如 何 解 码 音频 和 视频 。 编 解码 器 的 核心 就 是 一 个 算法 ,用 于 压缩 和 存储 视频 ， 以 减 
少 原始 文件 的 大 小 ,同时 可 能 会 也 可 能 不 会 损失 品质 。 视 频 编 解码 器 也 有 很 多 种 ， 其 中 有 代表 性 
的 有 三 个 : H.264、Theora 和 VP8。 同样 , 音频 文件 也 有 相应 的 编 解 码 器 , 常见 的 有 mp3 (MPEG-1 
Audio Layer 3)、aac (Advanced Audio Coding) 和 ogg (Ogg Vorbis ) 。 


注意 HH.264 编 解码 器 存在 一 个 非 技术 问题 ， 即 使 用 许可 。 使 用 H.264 的 解码 器 和 编码 器 都 要 付 
费 ， 分 发 经 编码 许可 制作 的 H.264 内 容 不 用 付费 ， 但 要 对 其 解码 则 必须 得 到 许可 。 换 向 
话说 ， 在 你 自己 的 网 站 上 发 布 再 .264 影片 不 用 交 钱 ， 但 需要 对 其 解码 的 浏览 器 开发 商 以 
及 开发 解码 软件 的 软件 开发 商都 要 得 到 许可 才 行 。 为 了 解决 视频 格式 的 许可 问题 ， 谷 歌 
把 VP8 编 解码 器 (在 WebM 容器 中 ) 的 专利 权 发 布 到 了 公共 域 ， 并 承诺 永 不 收回 。 他 们 
的 愿望 是 让 浏览 器 开发 商 在 实现 WebM/VP8/Vorbis 时 不 受 许可 限制 ， 并 向 所 有 人 提供 一 
种 公共 的 格式 。 


这 些 不 同 的 容器 格式 以 及 编 解 码 器 给 我 们 带 来 了 什么 问题 呢 ?” 问 题 就 是 没有 一 款 浏 览 器 支 
持 所 有 容器 和 编 解 码 器 ,因此 我 们 必须 提供 多 种 后 备 格 式 。Firefox 的 某 些 版 本 .Chrome 以 及 Opera 
支持 Theora/Vorbis/Ogg, IE9、Safari、Chrome、Mobile Safari 以 及 Android 支持 H.264/ACC/MP4， 
而 IE9、Firefox、Chrome 还 有 Opera 支持 WebM (VP8 和 Vorbis 的 另 一 种 容器 格式 )。 

如 此 混乱 的 结果 意味 着 没有 哪些 格式 可 以 跨 浏 览 器 。 但 愿 这 个 问题 在 不 久 的 将 来 能 够 解决 ， 
否则 视频 这 一 块 会 让 整个 HTML5 黯然 失色 。 眼 下 看 来 ， 为 了 保证 每 个 人 都 能 看 到 视频 ， 必 须 表 
作 多 种 格式 的 视频 并 在 <video> 元 素 中 包含 多 个 来 源 : 

<video id="movie” preload controls> 

«source src="movie.mp4" /> 
«source src=" movie.webm" 

type='video/webm; codecs="vp8, vorbis"' /> 
《SOUICe src="Mmovie.ogv" 

type='video/ogg; codecs="theora, vorbis"' /> 
<p>Download movie as 


<a href="movie.mp4">MPA</a>, 
<a href="movie.webm">WebM« /a>, 


Po 


or <a href="movie.ogv">0gg</a> .</p> 
</video> 


为 了 确保 HTML5 的 最 大 兼容 性 ， 至 少 要 包含 下 列 三 个 版 本 : 
口 基于 H.264 和 AAC 的 MP4 
DOD WebM (VP8+Vorbis) 
口 基于 Theora 视频 和 Vorbis 音频 的 Ogg 文件 

这 个 例子 中 没有 给 出 可 替代 的 插件 版 。 为 了 确保 最 大 程度 地 兼容 那些 不 支持 HIMLS 的 浏览 
器 ， 一 般 还 应 该 准备 一 个 Flash 或 QuickTime 插件 版 视频 。 但 在 这 里 ， 为 鼓励 用 户 升级 到 较为 先 
进 的 浏览 器 ， 我 提供 了 直接 下 载 不 同 格式 文件 的 链接 。 


局 
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注意 不 同 的 视频 格式 的 排列 次 序 也 是 一 个 问题 。 把 MP4 放 在 第 一 位 ， 是 为 了 让 保证 iPad、 
iPhone 及 iPod Touch 等 运行 iOS 的 设备 能 够 顺利 读 取 视频 。 因 为 iOS 4 之 前 版 本 中 的 
Mobile Safari 只 能 解析 一 个 <video> 元 素 ， 故 而 把 针对 iOS 的 格式 放 在 了 最 前 面 。 


总 之 ， 这些 问题 让 HTML5 视频 和 音频 变 得 有 点 乱 ， 一定 程度 上 影响 了 它 的 吸引 力 。 想 想 要 
制作 同一 视频 的 多 个 版 本 ,并 且 要 保存 三 个 甚至 更 多 个 文件 ， 有 人 不 禁 会 问 : 既然 最 后 还 是 要 提 
供 Flash 版 本 , 那 为 什么 不 直接 就 提供 一 个 Flash 影片 算 了 ? 答案 是 向 前 兼容 , 提供 较 新 的 <video> 
元 素 ， 可 以 在 支持 HTML5 的 浏览 器 中 对 视频 内 容 进行 更 多 控制 。 

对 HTML5 视频 ， 可 以 (或 将 来 可 以 ) 应 用 CSS 属性 以 修改 视频 的 外 观 、 大 小 及 形状 ， 可 以 
添加 字幕 和 歌词 等 信息 ， 还 可 以 组 合 视 频 和 画布 来 覆盖 内 容 。 甚 至 可 以 把 视频 插入 到 <canvas> 对 
象 中 ， 像 前 面 处 理 灰 度 图 片 一 样 ， 通 过 分 析 图 像 来 检测 视频 运动 。 

下 面 通过 一 个 例子 来 说 明 <video> 元 素 的 API， 看 看 怎样 定制 视频 控件 ， 怎 样 创建 简单 的 播放 
按钮 。 

2. 自 定义 控件 

浏览 器 在 显示 <video> 元 素 时 , 会 为 其 添加 一 些 与 浏览 器 样式 统一 的 标准 播放 控件 。 要 想 自 定 
义 这 些 控件 的 外 观 ， 或 者 添加 新 的 控件 ， 可 以 通过 一 些 DOM 属性 来 实现 ， 主 要 包括 : 

口 currentTime， 返 回 当 前 播放 的 位 置 ， 以 秒表 示 ，; 

口 duration， 返 回 媒体 的 总 时 长 ， 以 秒表 示 ， 对 于 流 媒体 返回 无 穷 大 ，; 

口 paused， 表 示 媒 体 是 否 处 于 暂停 状态 。 

此 外 ， 还 有 一 些 与 特定 媒体 相关 的 事件 ， 可 以 用 来 触发 你 的 脚本 。 主 要 事件 有 : 
口 play， 在 媒体 播放 开始 时 发 生 ， 

口 pause， 在 媒体 暂停 时 发 生 ， 

口 loadeddata， 在 媒体 可 以 从 当前 播放 位 置 开 始 播放 时 发 生 ， 

口 ended， 在 媒体 已 播放 完成 而 停止 时 发 生 。 

使 用 这 些 及 其 他 属性 和 事件 ， 可 以 轻松 地 创建 自 定义 的 视频 控件 ， 实 现 对 视频 的 各 种 控制 。 
从 暂停 和 播放 按钮 到 滑动 条 (进度 条 )， 都 没有 问题 。 

不 管 创建 什么 控件 , 都 别 忘 了 在 <video> 元 素 中 
添加 controls 属性 : 

<video src="movie.ogv” controls> 

这 行 代码 会 呈现 出 一 个 类 似 Chrome 浏览 器 中 
所 示 的 常见 的 播放 控制 界面 , 如 图 11-2 所 示 , 但 其 
中 的 控件 可 以 通过 脚本 来 移 走 。 

下 面 就 运用 我 们 掌握 的 DOM 脚本 技能 ， 来 创 
建 一 些 简单 的 视频 控件 。 


图 11-2 
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注意 读者 如 果 需 要 示例 文件 ， 可 以 从 http:/www.friendsofed.com/ 中 本 书页 面 下 载 源 代码 。 


第 一 步 先 创建 一 个 简单 的 HTML 页 面 , 命名 为 movie.html。 在 其 中 添加 一 个 <video> 元 素 , 并 
按照 前 面 的 介绍 指定 多 种 视频 格式 。 此 外 ,页 面 中 还 要 包含 player.css 样式 表 和 player.js 脚本 : 


<!DOCTYPE html> 
<html] lang="en"> 
<head> 
<meta charset="utf-8” /> 
<title>My Videox</title> 
<link rel="stylesheet” href="styles/player.css" /> 
</head> 
<body> 


<div class= "Video-wTappeT "> 
<video id="movie" controls> 
<source src="movie.mp4" /> 
<source src=" movie.webm" 
type= video/webm; codecs="vp8, vorbis"' /> 
«source src="Mmovie.ogv" 
type= Video/ogg; codecs="theora, vorbis"' /> 
<p>Download movie as 
<a_href= "movie.mp4">MP4</a>， 
«<a href="movie.webm">WebM</a>, 
or <a href="movie.ogv">0gg</a> .</p> 
</video> 
</div> 


«script src="scripts/player.js"></script> 
</body> 
</html> 


在 player.js 文件 中 ， 我 们 要 修改 页 面 中 的 所 有 <video> 元 素 ， 删 除 其 内 置 控件 并 添加 自 定义 
的 Play 按钮 。 把 下 面 两 个 完整 的 函数 添加 到 player.js 文件 中 : 


function createVideoControls() { 
var vids = document .getElementsByTagName( "video ); 
for (var i = 0 ; i < vids.length ; i++) { 
addControls( vids[i] ); 
} 
} 


function addControls( vid ) { 


vid.removeAttribute('controls' ); 


vid,.height = vid.videoHeight; 
vid.width = vid.videoWidth; 
vid.parentNode. style.height = vid.videoHeight + 'px'; 


vid.parentNode.style.width = vid.videowidth + 'px'; 


var controls = document.createElement('div'); 
controls.setAttribute('class','controls' ); 


var play = document.createElement('button'); 
play. setAttribute('title','Play' ); 
play.innerHTML = '&#x25BA;'; 


controls.appendChild(play); 
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vid.parentNode.insertBefore(controls, vid); 


play.onclick = function () { 
if (vid.ended) { 
vid.currentTime = 0; 


} 

if (vid.paused) { 
vid.play(); 

} else { 
vid.pause(); 


}; 


vid.addEventListener('play', function () { 
play.innerHTML = '&#x2590;&#x2590;"; 
play.setAttribute('paused' , true); 

}, false); 


vid.addEventListener('pause', function () { 
play.removeAttribute( 'paused' ); 
play.innerHTML = '&#x25BA;'; 

}, false); 


vid.addEventListener('ended', function () { 
vid.pause(); 
}, false); 
} 


window.onload = function() { 
createVideoControls(); 


} 
脚本 文件 player.js 中 的 这 两 个 函数 准备 完成 很 多 任务 。 首 先 ， 找 到 页 面 中 的 video 元 素 ， 
然后 对 它们 分 别 应 用 addControls 冰 数 : 


function createVideoControls() { 
var videos = document .getElementsByTagName( video' ); 
for (var i = 0 ; i «< videos.length ; i++) { 
addControls( videos[i] ); 


} 
在 addControls 函数 中 , 我 们 删除 了 video 元 素 原来 的 controls 属性 , 从 而 去 掉 其 内 置 的 控件 ， 
接着 又 创建 了 儿 个 DOM 对 象 ， 用 来 充当 Play/Pause 按钮 ， 并 把 它们 都 添加 为 video 元 素 的 子 元 素 。 


function addControls( vid ) { 


vid,.removeAttribute('controls' ); 


vid.height = vid.videoHeight; 

vid.width = vid.videoWidth; 

vid.parentNode. style.height = vid.videoHeight + 'px'; 
vid.parentNode.style.width = vid.videoWidth + 'px'; 


var controls = document.createElement('div'); 
controls. setAttribute('class','controls' ); 


var play = document.createElement('button' ); 
play.setAttribute('title', 'Play' ); 
play.innerHTML = '&#x25BA;'; 
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controls.appendChild(play); 

vid,.parentNode. insertBefore(controls, vid); 
接 下 来 ， 给 Play 按钮 添加 一 个 click 事件 ， 以 便 单 击 它 播放 影片 : 
play.onclick = function () { 


if (vid.ended) { 
vid.currentTime = 0; 


Ect 
[ 


二 (vid.paused) { 


vid.play(); 
} else { 
vid.pause(); 
}; 
最 后 ， 利 用 play、pause 和 ended 事件 来 修改 Play 按钮 的 状态 ， 并 在 影片 未 暂停 的 情况 下 显 
示 Pause 按钮 。 


vid.addEventlistener('play’, function () { 
play.innerHIML = '&#x2590;8&#x2590;"; 
play.setAttribute('paused' , true); 

}, false); 


vid.addEventListener('pause', function () { 
play.removeAttribute('paused' ); 
play.innerHIML = '&#x25BA;'; 

}, false); 


vid.addEventListener('ended', function () { 
vid.pause(); 
}, false); 


注意 恐怕 有 读者 注意 到 了 ， 这 里 使 用 的 是 addEventListener 方法 为 视频 添加 事件 。 
addEventListener 是 为 对 象 添 加 事件 处 理 函 数 的 规范 方法 。 之 前 我 们 使 用 onclick 之 类 的 
HTML-DOM 的 on 前 缓 属性 , 是 因为 了 (IE8 及 以 前 版 本 ) 使 用 的 是 一 个 不 同 的 attachEvent 
方法 。 而 到 了 下 9, 它 支 持 <video>, 也 是 完成 本 章 示 例 必 需 的 , 也 开始 支持 规范 的 addEvent- 
Listener 方法 了 。 因 此 ， 在 本 章 的 例子 中 使 用 该 方法 是 没有 问题 的 。 


为 了 给 控件 添加 样式 ， 需 要 在 player.css 中 添加 下 列 CSS 样式 。 可 以 使 用 CSS 对 控件 外 观 
随心 所 欲 地 更 改 ; 


.Video-wrapper { 
overflow: hidden; 


.Video-wrapper .controls { 
position: absolute; 
height:30px; 
width:30px; 
margin: auto; 
background: rgba(0,0,0,0.5); 
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.Video-wrapper button { 
display: block; 
width: 100%; 
height: 100%; 
border: 0; 
cursor: pointer; 
font-size: 17px; 
color: #fff; 
background: transparent; 


} 


.Video-wrapper button[paused] { 
font-size: 12px; 


} 
页 面 加 载 完 成 后 , window.1oad 事件 就 会 执行 createVideoControls 函数 , 结果 就 会 得 到 一 个 相 
对 粗糙 的 视频 控制 界面 ， 可 以 用 来 播放 和 和 暂停 视频 ， 如 图 11-3 所 示 。 


La 
Ww 


图 11-3 


这 个 简单 的 例子 只 包含 最 基本 的 控件 , 在 此 基础 上 , 还 可 以 利用 相应 的 属性 和 事件 添加 带 位 
置 指示 器 的 滑动 条 、 时 间 惟 ， 以 及 其 他 特殊 的 控件 。 到 底 添加 哪个 控件 ， 完 全 由 你 说 了 算 。 建 议 
大 家 抽空 学 习 一 下 HIMLS 视频 规范 中 其 他 与 视频 相关 的 属性 ， 地 址 为 http:/www.whatwg.org/ 
specs/web-apps/current-work/multipage/video.html#video。 另 外 ,也 可 以 访问 http:/www.w3.org/2010/ 
05/video/mediaevents.html， 看 看 其 中 给 出 的 一 些 实例 。 最 后 ， 给 大 家 推荐 一 本 书 ， 女 博士 Silvia 
Pfeiffer 撰写 的 The Definitive Guide to HTML5 Video (Apress，2011) ， 看 看 使 用 <video> 元 素 还 能 做 
哪些 事 。 


11.3.3 ”表单 


我 们 要 介绍 的 最 后 一 个 HTML5 元 素 就 是 表单 ,表单 的 身影 几乎 可 以 在 任何 一 个 网 页 中 看 到 ， 
但 在 HTML5 之 前 ， 可 用 的 输入 控件 类 型 却 少 得 可 怜 。 文 本 框 、 单 选 按 钮 、 复 选 框 对 于 简单 的 表 
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单 是 够 用 了 ， 但 在 需要 更 多 交互 功能 的 时 候 ， 仍 然 免不了 求 诸 DOM 脚本 披挂 上 阵 。 如 果 想 让 用 
户 更 方便 地 在 表单 中 输入 日 期 ， 就 得 自己 构建 界面 和 必要 的 JavaScript。 老 天 有 了 眼 ，HTML5 给 我 
们 带 来 了 很 多 新 表单 元 素 、 新 输入 控件 类 型 和 新 的 属性 ， 帮 有 我 们 实现 了 这 些 功能 。 不 过 ， 跟 以 往 
一 样 ， 你 的 DOM 编程 才能 还 是 可 以 派 上 用 场 的 。 

新 的 输入 控件 类 型 包括 : 
口 email1， 用 于 输入 电子 邮件 地 址 ， 
ur1， 用 于 输入 URL; 
date， 用 于 输入 日 期 和 时 间 ， 
number， 用 于 输入 数值 ; 
range， 用 于 生成 请 动 条 ; 
search， 用 于 搜索 框 ; 
te1， 用 于 输入 电话 号 码 ; 
D color， 用 于 选择 颜色 。 

这 些 新 类 型 比 单纯 的 type= "text "好 用 多 了 。 浏览 器 知道 这 些 控件 都 接受 什么 类 型 的 输入 , 因 
此 可 以 为 它们 配备 不 同 的 输入 控件 ， 例 如 在 移动 设备 上 更 换 不 同 的 软 键盘 。 图 11-4 中 两 幅 图 是 
iPhone 中 Mobile Safari 的 界面 , 一 幅 是 针对 文本 输入 框 的 键盘 , 一 幅 是 针对 电子 邮件 地 址 的 键盘 。 
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图 11-4 


相应 地 ， 新 的 属性 包括 如 下 这 些 。 
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autocomplete， 用 于 为 文本 (text) 输入 框 添加 一 组 建议 的 输入 项 
autofocus， 用 于 让 表单 元 素 自 动 获得 焦点 
form， 用 于 对 <form> 标 签 外 部 的 表单 元 素 分 组 ; 
min、max 和 step， 用 在 范围 (range) 和 数值 (number) 输入 框 中 ; 
pattern， 用 于 定义 一 个 正则 表达 式 ， 以 便 验证 输入 的 值 ， 
placeholder， 用 于 在 文本 输入 框 中 显示 临时 性 的 提示 信息 ， 
required， 表 示 必 填 。 

这 些 属性 把 很 多 原来 由 DOM 脚本 负责 的 任务 都 转移 给 了 浏览 器 ,例如 提供 自动 完成 的 建议 
项 和 验证 表单 输入 。 但 我 们 要 关注 的 问题 ， 是 在 浏览 器 不 支持 新 的 类 型 和 属性 时 怎么 办 。 

当然 ， 现 在 就 可 以 使 用 这 些 新 增 的 输入 控件 ， 因 为 它们 都 向 后 兼容 〈 某 种 程度 上 如 此 )。 对 
于 HIMLS 的 电子 邮件 输入 框 而 言 : 

<input type="email” /> 
旧 浏 览 器 会 将 该 类 型 默认 为 teXt， 并 呈现 出 标准 的 文本 输入 框 。 对 于 email 或 search 类 型 的 
输入 框 来 说 ， 这 不 会 造成 什么 大 问题 ， 但 对 于 range 滑动 条 就 不 行 了 。 想 象 一 下 ， 原 本 应 该 是 滑 
动 条 ， 但 现在 却 是 一 个 输入 框 ， 比 如 Safari 和 下 显示 的 range 控件 ， 如 图 11-5 所 示 。 


DOOOO OO 0 


ee | 


Safari Internet Explorer 


图 11-5 


为 了 应 对 不 兼容 的 浏览 器 ， 必 须 使 用 特性 检测 来 准备 另 一 个 方案 。 
使 用 本 章 前 面 提 到 的 Modernizr 库 ， 就 可 以 进行 兼容 性 检查 。 比 如 ， 要 检查 浏览 器 是 否 支 持 
某 个 输入 类 型 的 控件 ， 可 以 使 用 inputtypes .type 属性 : 


If ( !Modernizr.inputtypes.date ) { 
} // 生成 日 期 选择 器 的 脚本 


而 要 检查 某 个 属性 ， 则 可 以 使 用 input ,attribute 属性 : 


if ( !Modernizr.input.placeholder ){ 
} // 生成 占 位 符 提 示 信 息 的 脚本 


要 是 没有 使 用 Modernizr， 可 以 使 用 下 面 这 个 inputSupportsType 国 数 来 检查 浏览 器 是 否 支持 
某 种 类 型 的 输入 控件 ; 
function inputSupportsType(type) { 
if (ldocument.createElement) return false; 
var input = document.createElement('input' ); 


input. setAttribute( "type' ,type); 
if (input.type == 'text' && type != 'text') { 


return false; 
} else { 
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return true; 


} 
使 用 inputSupportsType 函数 的 方式 与 使 用 Modernizr 一样 : 


if ( !inputSupportsType( "date') ) { 
人 


要 检查 特定 的 属性 ， 可 以 使 用 下 面 这 个 elementSupportsAttribute 函数 : 


function elementSupportsAttribute(elementName, attribute) { 
if (!document.createElement) return false; 
var temp = document.createElement (elementName); 
return ( attribute in temp ); 


使 用 elementSupportsAttribute 函数 的 方法 还 是 那样 , 只 不 过 需要 传 入 元素 名 和 要 检查 的 属性 名 : 


if ( lelementSupportsAttribute( 'input', ‘placeholder' ) ){ 
// 生成 占 位 符 提示 信息 的 脚本 


在 稳妥 的 特性 检查 的 基础 上 ， 就 可 以 一 方面 试用 新 的 HTMLS 表单 元 素 ， 另 一 方面 提供 备用 
的 DOM 脚本 ， 以 便 浏 览 器 不 支持 某 种 类 型 或 属性 时 “挺身 而 出 ”。 
举 个 例子 ， 假 设 你 想 在 自己 的 文本 输入 框 中 加 入 占 位 符 信息 。 在 HTML5 中 ， 只 要 像 下 面 这 


样 使 用 placeholder 就 行 了 : 


<input type="text”jid= "first-name”placeholder="YouT First Name” /> 


在 Safari 或 Chrome 浏览 器 中 ， 占 位 符 会 在 用 户 尚未 输入 值 [YeurprstName | 
的 情况 下 显示 指定 的 临时 文本 ， 如 图 11-6 所 示 。 Vour Frst Name 


要 在 不 支持 placeholder 属性 的 浏览 器 中 实现 相同 的 效果 ， 图 11-6 
就 得 编写 一 个 简单 的 DOM 脚本 来 完成 同样 的 功能 
if ( !IModernizr.input.placeholder ) { 
var input = document.getElementById('first-name’) 


input.onfocus = function () { 
var text = this.placeholder || this.getAttribute('placeholder'); 
if ( this.value == text ) { 
// 重 置 输入 框 的 值 ， 以 隐藏 临时 的 占 位 符 文本 
this.value = ""; 


input.onblur = function () { 
if ( this.value == '" ){ 
// 把 输入 框 的 值 设置 为 占 位 符 文 
this.value = this. a || this.getAttribute('placeholder'); 


} 


} 
// 在 onblur 处 理 函 数 运行 时 中 添加 占 位 符 文本 
input.onblur(); 


当然 ， 这 个 赫 代 方案 的 主要 问题 是 必须 依赖 于 JavaScript 实现 同样 的 功能 。 因 此 ， 还 必须 考 
虑 到 在 JavaScript 不 可 用 的 情况 下 选择 什么 输入 控件 最 合适 。 
要 作为 后 备 的 高 级 功能 《如 自动 完成 和 请 动 条 ) 越 多 , 开发 工作 量 就 越 大 , 占用 时 间 就 越 多 。 
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所 以 还 建议 大 家 选择 已 有 的 一 些 帮 有 我 们 完成 了 相应 功能 的 库 。 要 了 解 有 关 JavaScript 库 的 相关 内 
容 ， 请 参考 本 书 附录 。 


11.4 HTML5 还 有 其 他 特性 吗 


有 ! 本 章 前 面 介 绍 的 这 几 个 标签 和 属性 只 是 HTML5 的 冰山 一 角 而 已 。 请 读者 注意 , HTML5 
这 个 规范 至 今 仍然 没有 侍 埃 落 定 , 很 多 地 方 都 有 可 能 发 生变 化 。 在 浏览 器 支持 不 是 特别 完善 的 情 
况 下 , 全 面 转 入 HTML5 还 为 时 过 早 , 但 这 不 会 影响 我 们 继续 探索 的 兴致 。 比 如 , HTML JavaScript 
API 可 是 我 们 大 家 期 望 已 久 的 了 。 等 不 了 多 长 时 间 , 我 们 就 可 以 享受 HIMLS 的 诸多 便捷 功能 
口 使 用 localStorage 和 sessionStorage 在 客户 端 存储 大 型 和 复杂 数据 集 的 更 有 效 方 案 
(http://dev.w3.org/htmlS/webstorage ) ; 
口 使 用 WebSocket 与 服务 器 端 脚 本 进行 开放 的 双向 通信 (http://dev.w3.org/html5/websockets/) ; 
口 使 用 Web Worker 在 后 台 执 行 JavaScript (http://www.whatwg.org/specs/web-workers/current-work/) ; 
0D 标准 化 的 拖 放 实现 (http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd. 
html#dnd ) ; 
口 在 浏览 器 中 实现 地 理 位 置 服务 (http:/www.w3.org/TR/geolocation-API/) 。 

这 些 新 功能 并 不 都 与 DOM 相关 ,但 它们 却 是 你 应 该 了 解 和 掌握 并 在 不 和 久 的 将 来 每 天 都 会 使 
用 的 ， 所 以 最 好 提前 多 花 些 时 间 熟 悉 它 们 。 

要 了 解 更 多 相关 内 容 和 示例 ， 请 参考 以 下 资源 。 
DO W3C HTMLS Working Draft: http:/www.w3.o0org/TR/htmls; 
DD WHATWG HTML5 (包含 开发 中 的 下 一 代 技 术 ): http:/www.whatwg.org/specs/web-apps/ 
current-work; 
口 HTML5 的 交互 性 演示 : http://html5demos.comy/; 
口 HTMLS 相关 的 PPT、 人 代码、 示例 及 教程 : http://www.htmlSrocks.cony; 
口 Dive into HTML5， 作 者 Mark Pilgrim: http://diveintohtml5.org/; 


11.5 ”小结 


本 章 ， 我们 了 解 了 HTMLS5 以 及 使 用 Modernizr 等 工具 检测 特性 的 重要 性 。 同 时 也 编写 了 儿 
个 例子 ， 介 绍 如 何 使 用 特性 检测 来 确保 为 新 的 HTML5 特性 提供 后 备 功能 。 本 章 介绍 的 HTML5 
的 新 特性 包括 : 
口 可 以 用 来 在 文档 中 绘制 矢量 及 位 图 的 <canvas> 元 素 ; 
D 可 以 免 插 件 而 直接 在 网 页 中 嵌入 音频 和 视频 的 <audio> 和 <video> 元 素 ，; 
口 可 以 为 你 提供 更 广泛 选择 的 新 的 表单 控件 类 型 以 及 新 的 属性 。 

到 目前 为 止 ,我们 掌握 的 DOM 脚本 编程 技能 都 处 于 各 自 为 战 的 状态 。 下 一 章 ， 我 们 就 把 前 
面 学 到 的 所 有 概念 和 技术 综合 起 来 ， 创 建 一 个 项 目 。 

到 了 融会 贯通 学 以 致 用 的 时 候 了 。 


例 


| 


中 从 
-小 品 


本 章 内容 

口 组 织 内 容 

口 应 用 样式 

口 使 用 JavaScript、DOM 和 Ajax 增强 功能 


前 面 我 们 看 到 过 很 多 DOM 脚本 编程 的 例子 , 但 那些 为 了 说 明 问 题 而 设计 的 例子 之 间 都 没有 
什么 联系 。 本 章 我 们 就 来 做 一 个 综合 的 项 目 ， 把 所 有 与 DOM 脚本 编程 相关 的 技术 学 以 致 用 。 具 
体 来 说 ， 我 们 会 从 头 开始 做 一 个 网 站 ， 然 后 再 用 JavaScript 来 为 这 个 网 站 增加 交互 功能 。 


12.1 项 目 简 介 


有 一 件 美 差 落 在 了 你 的 头 上 ! 作为 一 名 Web 设计 师 , 你 被 选中 为 世界 最 著名 的 乐队 Jay Skript 
and the Domsters 设计 一 个 网 站 。 

噢 ， 没 听 说 过 这 个 乐队 ? 不要紧, 我们 一 起 来 编 个 故事 。 就 当 你 配合 我 把 这 章 写 完 吧 , 假装 
有 那么 一 个 国际 知名 乐队 ， 而 你 恰好 有 幸 被 选中 ， 要 承担 起 为 这 个 乐队 设计 网 站 的 任务 。 

这 个 网 站 必须 跟 这 个 乐队 一 样 ， 得 酷 。 要 是 你 能 再 给 网 页 加 上 一 些 交互 特性 ， 那 就 酷 毙 了 。 
但 是 别 忘 了 ， 这 个 网 站 还 必须 对 残疾 用 户 以 及 搜索 引擎 保持 友好 。 

开办 这 个 网 站 的 主要 目的 就 是 发 布 有 关 乐 队 的 信息 。 无论 怎么 构思 这 个 网 站 ,首先 都 得 确保 
这 些 信 息 能 让 访客 一 目 了 然 。 下 面 我 们 就 来 看 看 都 要 做 些 什 么 。 


12.1.1 原始 资料 


客户 已 经 提交 了 构建 网 站 所 需 的 东西 : 有 关 乐 队 的 介绍 材料 、 近 演 日 程 ， 还 有 一 些 照片 。 这 
个 网 站 不 需要 太 多 的 页 面 , 它 本 质 上 就 是 一 个 宣传 手册 , 而 这 一 点 也 正 是 你 要 把 握 的 核心 用 户 体验 。 


12.1.2 ”站 点 结构 


根据 客户 提供 的 资料 ， 可 以 画 出 一 张 简单 的 站 点 地 图 。 站 点 的 结构 的 确 不 算 复 杂 ， 至少 可 以 
把 所 有 页 面 都 放 在 一 个 文件 夹 里 。 
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为 了 准备 站 点 的 制作 ， 创 建 三 个 文件 夹 ， 一 个 叫 images， 保 存 要 用 的 图 片 ， 一 个 叫 styles， 


保存 CSS 文件 ;一 个 电 Scripts， 保 存 JavaScript 文件 。 


站 点 文件 夹 的 目录 结构 如 下 所 示 : 
D /images 
DO /styles 
口 /Scripts 


说 到 页 面 , 首先 得 有 一 个 详细 介绍 乐队 背景 信息 的 页 面 。 其 次 要 有 一 个 类 似 相 册 的 放 照 片 的 


页 面 。 近 演 日 程 安排 当然 也 要 单独 一 个 页 面 。 为 了 让 歌迷 与 乐队 沟通 ， 还 必须 有 一 个 联系 页 面 。 
最 后 ， 当 然 要 有 一 个 主页 ， 放 上 乐队 简介 和 站 点 导航 信息 。 以 下 是 要 创建 的 几 个 页 面 (如 图 12-1 


所 示 ) : 
口 Home 
口 About 
口 Photos 
口 Live 
口 Contact 
HTML HTML HTML HTML 
[| 
FE 
[Er| 
Home About Photos Live Contact 
图 12-1 
这 几 个 页 面 对 应 如 下 文件 : 


DO index.html 
口 about .html 
DQ photos.html 
D live.html 
DO contact.html 


虽然 每 个 页 面 的 内 容 不 一 样 , 但 它们 都 要 使 用 相同 的 基本 结构 。 下 面 该 考虑 为 这 些 页 面 创建 


一 个 模板 了 。 
12.1.3 页 面 结构 


站 点 的 每 个 页 面 都 要 分 成 儿 个 区 域 。 
0 es 含 站 点 的 品牌 性 信息 ， 也 是 放 Logo 的 地 方 。 这 个 区 域 要 使 用 <header> 元 素 。 
导航 区 域 中 包含 一 组 链接 ， 指 向 各 个 页 面 。 这 个 区 域 使 用 <nav> 元 素 。 12 
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D 内 容 区 域 包含 每 一 页 的 实质 性 内 容 ， 这 个 区 域 使 用 <article> 元 素 。 
因为 要 使 用 HTML5 元 素 ， 所 以 也 要 在 文档 的 <head> 元 素 中 包含 Modernizr 库 (第 11 章 介绍 
过 )。 可 以 从 http://modernizr.com/ 下 载 这 个 库 的 最 新 版 本 (撰写 本 章 时 的 最 新 版 本 为 1.6) ， 并 将 


其 放 到 scripts 文件 夹 中 。 
最 后 ， 模 板 的 代码 没有 多 长 。 


<!DOCTYPE html> 
<html] lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Jay Skript and the Domsters</title> 
«script src="scripts/modernizr-1.6.min.js"></script> 
</head> 
<body> 
<header> 
<nav> 
<ul> 
<1i><a href="index.html">Home</a></1i> 
<li><a href="about.html">About</a></1i> 
<li><a href="photos.html">Photos</a></1i> 
<li><a href="live.html">Live</a></l1i> 
<1i><a href="contact.html">Contact</a></1i> 
</ul> 
<Vnavy> 
</header> 
<article> 
</article> 
</body> 
</html> 


把 这 些 代码 保存 在 template.html 文件 中 。 


在 设计 好 页 面 结构 后 , 下面 就 要 一 页 一 页 地 插入 内 容 了 。 不 过 ,让 我 们 先 来 设想 一 下 站 点 完 


工 后 的 外 观 。 
12.2 设计 


既然 知道 了 每 个 页 面 中 都 包含 哪些 结构 化 元 素 , 而 且 手 里 也 已 经 有 了 客户 提供 的 资料 ， 那么 
接 下 来 的 外 观 设计 就 不 难 做 了 。 你 可 以 选择 Photoshop、Fireworks 或 任何 其 他 的 图 形 设计 工具 ， 
做 出 你 认为 适合 的 任何 风格 的 设计 方案 (如 图 12-2 所 示 )。 用 一 位 著名 厨师 的 话说 ,“ 以 下 是 我 


早 就 为 您 准备 好 的 。 
做 完了 视觉 设计 之 后 ,可 以 把 平面 设计 切 分 成 多 个 图 片 。 把 背景 图 


片 保存 为 background.gif。 


而 品牌 图 像 保存 为 1090.9if。 而 带 有 一 点 渐变 的 导航 条 要 命名 为 navbar.gif。 最 后 把 人 物 剪 影 保 


存 为 guitarist.gif。 把 这 些 图 片 都 放 到 images 文件 夹 中 。 


注意 ”如果 你 不 是 设计 高 手 ， 还 是 建议 你 从 Friend of ED 网 站 (http:/www.friendsofed.com/) 的 


本 书页 面 中 下 载 本 章 用 到 的 图 像 。 
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Jay Skript 
and the 
DOMSTERS 


Thanks for contacing us. We'l get back io you as soon as we can. 


12.3 CSS 


现在 ,你 有 了 基本 的 HTML 模板 ， 也 知道 自己 的 站 点 长 什么 样 了 。 通 过 为 模板 应 用 CSS ， 
可 以 在 Web 上 再 现 你 的 设计 方案 。 

如 果 把 所 有 CSS 都 放 到 一 个 文件 中 ， 可 能 会 为 后 期 维护 带 来 一 些 麻烦 。 而 把 所 有 CSS 分 别 
放 在 几 个 文件 中 则 是 个 好 主意 。 

怎样 组 件 CSS 由 你 决定 ， 但 我 建议 用 其 中 一 个 保存 与 整体 布局 有 关 的 样式 ， 用 另 一 个 作为 
专门 的 颜色 样式 表 ， 而 用 第 三 个 来 保存 与 版 式 有 关 的 样式 : 
口 layout.css 
口 color.css 
OD typography.css 
这 些 样式 表 都 可 以 导入 到 一 个 基本 的 样式 表 中 : 


Qimport url(layout.css); 
Qimport url(color.css); 
@import url(typography.css); 


把 包含 这 三 行 代码 的 文件 保存 为 basic.css， 并 放 在 styles 文件 夹 中 。 如 果 你 想 添加 一 个 新 
样式 表 或 者 删除 一 个 样式 ， 只 要 编辑 basic.css 即 可 。 

可 以 在 模板 的 <head> 元 素 中 通过 <1ink> 元 素 引 入 这 个 基本 样式 表 。 然 后 ， 再 在 页 面 <header> 
中 添加 一 个 <img> 标 签 ， 指 向 logo 图 片 。 此 时 也 可 以 向 <article> 中 添加 一 些 临时 性 填充 文本 。 


《1DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Jay Skript and the Domsters</title> 
<script src="scripts/modernizr-1.6.min.js"></script> 
<link rel="stylesheet” media="screen" href="styles/basic.css" /> 
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</head> 
<body> 
<header> 
<img src="images/logo.gif" alt="Jay Skript and the Domsters” /> 
<nav> 
<ul> 
<li><a href="index.html">Home</a></1i> 
<li><a href="about.html">About</a></1i> 
<1i><a href="photos.html">Photos</a></1i> 
<li><a href="live.html">Live</a></1i> 
<li><a href="contact.html">Contact</a></1i> 
</ul> 
</nav> 
</header> 
<article> 
<h1>Lorem Ipsum Dolor</h1> 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Nullam iaculis vestibulum turpis. Pellentesque mattis rutrum 
nibh. Quisque orci, euismod sit amet, sollicitudin et， 
ullamcorper at, lorem. 
Pellentesque habitant morbi tristique senectus et netus 
et malesuada fames ac turpis egestas. 
Ut lectus. Mauris eu sapien non enim dapibus imperdiet. 
Sed eu mauris sed pede mollis commodo. 
Fusce eget est. Sed ullamcorper enim nec est. 
Cras dui felis, porta vitae, faucibus laoreet, sollicitudin eget, 
enim, Nulla auctor. Fusce interdum diam ac eros., 
Mauris egestas. Fusce in elit et sem aliquet pretiunm. 
Donec nunc erat, sodales ac, facilisis a, molestie eu, massa. 
Aenean nec justo eu neque malesuada aliquet.</p> 
</article> 
</body> 
</html> 


这 样 ， 基 本 的 模板 就 算 完工 了 ， 如 图 12-3 所 示 。 
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12.3.1 颜色 
举 式 表 color .css 是 最 直观 的 。 记 住 ， 不 管 为 哪个 元 素 应 用 什么 颜色 ， 都 要 同时 给 它 一 个 背 


景色 。 否 则 ， 就 有 可 能 导致 意外 ， 看 不 到 某 些 文本 。 
body { 
color: #fb5; 
background-color: #334; 


一 


} 
a:link { 
CoOlor: #445; 
background-color: #eb6; 
} 
a:visited { 
Color: #345; 
background-color: #eb6; 
} 
a:hover { 
color: #667; 
background-color: #fb5; 
} 
a:active { 
color: #778; 
background-color: #ec8; 
} 
header { 
color: #ec8; 
background-color: #334; 
border-color: #667; 


header nav { 
color: #455; 
background-color: #789; 
border-color: #667; 


article { 
CoOlor: #223; 
background-color: #edc; 
border-color: #667; 


header nav ul { 
border-color: #99a; 

} 

header nav a:link,header nav a:visited { 
color: #eef; 
background-color: transparent; 
border-color: #99a; 


header nav a:hover { 
Color: #445; 
background-color: #eb6; 


header nav a:active { 
color: #667; 
background-color: #ec8; 


article img { 
border-color: #bag9; 
outline-color: #dcb; 


} 
#imagegallery a { 
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background-color: transparent; 


此 时 的 模板 已 经 有 了 色彩 了 ， 如 图 12-4 所 示 。 
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图 12-4 


12.3.2 布局 


基本 的 布局 还 是 相当 简单 的 ， 所 有 内 容 都 在 一 栏 中 。 

为 了 让 导航 中 的 链接 水 平 排列 ， 需 要 应 用 一 些 浮动 效果 。 除 此 之 外 ，1ayout .css 也 没有 什么 
不 好 理解 的 了 。 

首先 是 为 HIMLS 块 元 素 定义 默认 的 样式 。 主 要 针对 那些 不 支持 它们 的 浏览 器 ， 好 让 这 些 元 
素 都 能 够 具有 适当 的 块 布局 。 

其 次 , 使 用 通 配 选 择 器 把 所 有 元 素 的 内 外 边 距 设置 为 零 。 这 样 就 把 不 同 浏 览 器 为 元 素 设置 的 
不 同 内 外 边 距 全 都 删除 了 。 重 设 这 些 值 之 后 ， 所 有 样式 就 可 以 一 视 同仁 了 。 


section, header, article, nav { 
display: block; 


六 
padding: 0; 
margin: 0; 

body { 


margin: 1em 10%; 

background-image: url(../images/background.gif); 
background-attachment: fixed; 
background-position: top left; 
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background-repeat: repeat-x; 
max-width: 80em; 


} 

header { 
background-image: url(../images/guitarist.gif); 
background-repeat: no-repeat; 
background-position: bottom right; 
border-width: .1em; 
border-style: solid; 
border-bottom-width: 0; 


header nav { 
background-image: url(../images/navbar.gif); 
background-position: bottom left; 
background-repeat: repeat-x; 
border-width: .1em; 
border-style: solid; 
border-bottom-width: 0; 
border-top-width: 0; 
padding-left: 10%; 


header nav ul { 
width: 100%; 
overflow: hidden; 
border-left-width: .1em; 
border-left-style: solid; 


header nav 1i { 
display: inline; 


header nav lia{ 
display: block; 
float: left; 
padding: .5em 2em; 
border-right: .1em solid; 


article { 
border-width: .1em; 
border-style: solid; 
border-top-width: 0; 
padding: 2em 10%; 
line-height: 1.8em; 


article img { 
border-width: .1em; 
border-style: solid; 
outline-width: .1em; 
outline-style: solid; 


} 
这 样 ， 我 们 就 通过 CSS 定义 了 颜色 和 布局 ， 如 图 12-5 所 示 。 
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图 12-5 


12.3.3 版式 


有 了 时候， 的 确 很 难 分 清 某 些 样式 声明 放 到 哪个 文件 里 更 合适 。 字 体 和 大 小 很 显然 应 该 放 在 
typography.css 里 ， 但 外 边 距 和 内 边 距 呢 ? 很 难说 它们 到 底 应 该 与 布局 有 关 ， 还 是 与 版 式 有 关 。 
在 我 们 这 个 例子 中 ， 把 内 边 距 信息 都 放 在 了 1ayout .css 中 定义 〈 上 一 节 已 经 定义 了 ) ， 而 外 边 距 
信息 则 会 放 在 typography.css 中 。 


body { 
font-size: 76%; 
font-family: “Helvetica","Arial",sans-serif; 


body * { 
font-size: 1em; 

} 

a { 
font-weight: bold; 
text-decoration: none; 


header nav { 
font-family: “Lucida Grande","Helvetica","Arial",sans-serif; 


header nav a { 
text-decoration: none; 
font-weight: bold; 


article { 
line-height: 1.8em; 


} 
article p { 
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margin: 1em 0; 

} 

h1 { 
font-family: “Georgia","Times New Roman",sans-serif; 
font: 2.4em normal; 


} 

h2 { 
font-family: “Georgia","Times New Roman",sans-serif; 
font: 1.8em normal; 
margin-top: 1em; 


h3 { 
font-family: “Georgia","Times New Roman”",sans-serif; 


font: 1.4em normal; 
margin-top: 1em; 


#imagegallery 1i { 
list-style-type: none; 


textarea { 
font-family: "Helvetica","Arial",sans-serif; 


} 
现在 ， 模 板 不 仅 有 了 颜色 、 布 局 ， 还 具有 了 版 式 ， 如 图 12-6 所 示 。 
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图 12-6 


以 上 三 个 CSS 文 件 (color.css、1ayout.css 和 typography.css) 都 和 basic.css 样式 表 一 块 ， 
放 在 styles 文件 夹 中 。 


12.4 标记 
模板 做 完了 ， 样 式 也 都 写 得 差不多 了 。 接 下 来 该 考虑 站 点 中 的 每 个 页 面 了 。 12 
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首先 从 主页 index.html 开始 ， 这 个 页 面包 含 一 段 介 绍 性 文字 ， 放 在 <article> 元 素 中 : 
<p id="intro"> 

Welcome to the official website of Jay Skript and the Domsters. 

Here, you can «a href="about.html" title="About">learn more about the band</a>， 

view <a href="photos.html" title="Photos">photos of the band</a>， 

find out about <a href="live.html” title="Tour Date">tour dates</a> 


and <a href="contact.htm]l”" title="Contact">get in touch with the band</a>. 
</p> 


这 样 ， 主 页 就 完成 了 ， 如 图 12-7 所 示 。 
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图 12-7 


这 段 文字 有 一 个 过 ， 叫 "intro"。 我 们 要 利用 这 个 id 为 这 段 介绍 添加 特殊 的 样式 。 此 外 ， 还 
可 以 利用 这 个 id 来 添加 一 些 DOM 脚本 。 


12.5 _ JavaScript 


在 编写 DOM 脚本 之 前 ， 必 须 先 确定 怎么 组 织 JavaScript 文件 。 如 果 站 点 需要 很 多 长 长 的 脚 
本 ， 那 最 好 把 它 分 割 成 儿 个 小 文件 ， 正 如 本 书 前 面 展 示 的 那样 。 可 是 ， 眼 下 这 个 网 站 非常 简单 ， 
所 需 的 JavaScript 代码 也 不 长 。 为 了 减少 请 求 的 数量 ， 我 们 就 把 所 有 脚本 都 放 在 一 个 叫 gjobal .js 
的 文件 里 。 这 样 也 有 助 于 最 后 缩减 其 代码 。 

先 在 Scripts 文件 夹 中 创建 91obal.js。 然 后 在 其 中 添加 几 个 整个 站 点 都 会 用 到 的 函数 。 

肯定 要 用 到 addLoadEvent 函数 (参见 第 6 章 )， 因 为 在 文档 完全 加 载 后 如 果 想 运行 茶 个 函数 ， 
就 要 用 到 它 。 


function addLoadEvent(func) { 
var oldonload = window.onload; 
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if (typeof window.onload != 'function’) { 
window.onload = func; 
} else { 
window.onload = function() { 
oldonload(); 
func(); 


} 
} 


另外 ，insertAfter 函数 (参见 第 7 章 ) 也 很 有 用 ， 它 与 insertBefore 方 法 正好 对 应 。 


function insertAfter(newElement, targetElement) { 
Var parent = targetElement.parentNode; 
if (parent.lastChild == targetElement) { 
parent.appendChild(newElement); 
} else { 
parent.insertBefore(newElement, targetElement.nextSibling); 


} 
最 后 还 需要 一 个 addClass 函数 (参见 第 9 章 )。 


function addClass(element,value) { 
if (lelement.className) { 
element.className = value; 


} else { 
newClassName = element.className; 
newClassName+= " "; 


newClassName+= value; 
element.className = newClassName; 


} 
要 调用 这 个 脚本 ， 应 该 在 模板 页 面 index.html 结束 的 </body> 标 签 之 前 ， 添 加 一 个 <script> 标 
签 ， 
</article> 
<script src="scripts/global.js"></script> 
</body> 
</html> 


这 样 ， 站 点 中 的 每 个 页 面 都 将 包含 global.js 文件 ， 而 其 中 的 函数 也 可 以 在 这 些 页 面 里 共 
享 了 。 


实际 上 ， 还 需要 向 global .js 文件 中 添加 一 个 函数 ， 就 是 下 一 节 我 们 要 写 的 highlightPage。 
12.5.1 页 面 突 出 显示 


每 当 我 们 基于 模板 页 面 创建 一 个 新 页 面 时 ,都 要 向 <article> 元 素 中 插入 标记 。 对 你 要 设计 的 
站 点 而 言 ， 这 一 部 分 正 是 每 个 页 面 之 间 不 同 的 地 方 。 
理想 情况 下 ， 还 应 该 更 新 每 个 页 面 <nav> 元 素 中 的 链接 。 比 如 ， 如 果 当 前 页 面 是 index.html， 
那么 导航 里 面 就 没有 必要 添加 指向 当前 index.html 页 面 的 链接 了 。 

但 在 实际 的 网 站 开发 中 , 不 太 可 能 一 页 一 页 地 编辑 导航 链接 。 更 常见 的 做 法 是 通过 服务 器 端 包 
含 技术 ， 把 包含 导航 标记 的 片段 插入 到 每 个 页 面 中 。 这 里 我 们 就 假设 服务 器 端 会 包含 下 列 代码 块 : 
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<header> 
<img src="images/logo.gif" alt="Jay Skript and the Domsters” /> 
<nav> 
<U1> 
<1i><a href="index.html">Home</a></1i> 
<1Li><a href="about.html">About</a></1i> 
«<li>x<a hzef="photos .htm1">Photos</a></1i> 
<1i><a href="live.html">Livex</a></1i> 
<1Li><a href="contact.html">Contact</a></1i> 
</ul> 
</nav> 
</header> 


服务 器 端 包含 可 以 使 用 Apache Server Side Includes (SSIs)、PHP、ASP, 或 者 其 他 服务 器 端 
上 

服务 器 端 包含 的 优点 是 可 以 把 重用 标记 块 集中 保存 。 这样 ,等 到 以 后 要 更 新 页 面 头 部 或 者 导 
航 链接 时 ， 只 要 修改 一 个 文件 就 可 以 了 。 但 集中 保存 的 缺点 ， 就 是 不 能 在 每 个 页 面 中 自 定义 这 
个 块 。 

无 论 如 何 ， 至 少 当 前 页 面 的 导航 链接 还 是 应 该 突出 显示 的 。 通 过 突出 显示 , 访客 就 能 知道 自 
己 “ 现 在 在 这 里 ”。 

修改 color.css 文件 ， 添 加 为 here 类 定义 的 样式 : 


header nav a.here:link, 
header nav a.here:visited, 
header nav a.here:hover, 
header nav a.here:active { 
color: #eef; 
background-color: #799; 


为 了 应 用 刚刚 定义 的 颜色 样式 ， 为 指向 当前 页 面 的 导航 链接 添加 here 类 ， 如 下 所 示 : 

<a href="index,html" class="here">Home</a></1i> 

如 果 使 用 服务 器 端 包含 的 话 ， 要 做 到 这 一 点 可 就 不 容易 了 。 一 般 来 说 ,服务 器 端 技 术 应 该 为 
每 个 页 面 创建 正确 的 标记 。 但 实际 情况 却 并 非 始 终 如 此 。 

JavaScript 这 个 时 候 就 能 派 上 用 场 了 。 

在 这 个 例子 中 ，JavaScript 是 最 后 一 招 了 。 如 果 能 在 标记 中 直接 添加 here 类 ， 当 然 最 好 了 。 
但 是 ， 如 果 控 制 不 了 标记 ， 就 只 好 求 诸 JavaScript 了 。 

首先 ， 删除 已 经 添加 到 导航 链接 中 的 所 有 class 属性 。 然 后 ,编写 一 个 hight1ightPage 函数 ， 
完成 下 列 操作 : 

(1) 取得 导航 列表 中 所 有 链接， 

(2) 循环 遍历 这 些 链 接 ; 

(3) 如 果 发 现 了 与 当前 URL 匹配 的 链接 ， 为 它 添 加 here 类 。 

同 往常 一 样 ， 先 在 函数 中 添加 检查 要 使 用 的 DOM 方法 的 代码 。 此 外 ， 还 要 检查 各 种 元 素 是 
否 存在 。 


function highlightpage() { 
if (!document.getElementsByTagName) return false; 
if (ldocument.getElementById) return false; 
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var headers = document.getElementsByTagName( 'header' ); 
if (headers.length == 0) return false; 


var navs = headers[0 


] .getElementsByTagName( 'nav' ); 
if (navs.length == 0) return false; 


取得 导航 链接 ， 然 后 循环 遍历 它们 : 


var links = navs[0].getElementsByTagName("a"); 


var linkurz]; 


for (var i=0; ilinks.length; i++) { 


接 下 来 ， 要 比较 当前 链接 的 URL 与 当前 页 面 的 URL 。 要 取得 链接 的 URL, 可 以 使 用 
getAttribute("href")， 而 要 取得 当前 页 面 的 URL， 则 可 以 使 用 window.1ocation.href。 
linkurl = links[i].getAttribute("href"); 


JavaScript 为 比较 字符 串 提 供 了 很 多 方法 。 其 中 ，index0f 方法 用 于 在 字符 串 中 寻找 子 字符 串 


的 位 置 : 


string.indexOf(substring) 


这 个 方法 返回 子 字符 串 第 一 次 出 现 的 位 置 。 我 们 在 这 里 只 想 知 道 某 个 字符 串 是 否 被 包含 在 另 
一 个 字符 串 里 面 ， 是 否 是 当前 URL 里 的 链接 URL。 


currenturl. indexOf (linkurl1) 


如 果 没 有 匹配 到 ，index0f 方法 将 返 


回 -1。 如 果 返 回 其 他 值 ， 则 表示 有 匹配 。 如 果 index0f 方 


法 不 返回 -1， 那 么 就 可 以 前 进 到 函数 的 最 后 一 步 了 : 


if (window.location,.href.indexOf(linkurl) != -1) { 


此 时 的 链接 一 定 是 指向 当前 页 面 的 链接 ， 


links[i].className = "here"; 


因此 就 给 它 添加 here 类 : 


剩 下 的 代码 就 是 关闭 if 语句 、 关 闭 for 循环 和 关闭 function 定义 的 花 括 号 了 。 最 后 ， 使 用 


addLoadEvent 图 数 调用 highlightPage。 


function highlightpage() { 


if (!document.getElementsByTagName) return false; 

if (!document.getElementById) return false; 

var headers = document.getElementsByTagName( ‘header' ); 
if (headers.length == 0) return false; 

var navs = headers[0].getElementsByTagName( nav ); 


if (navs.length == 0) return false; 


var links = navs[0] .getElementsByTagName("a"); 


Var linkurl; 


for (var i=0; i<links.length; i++) { 
linkurl = links[i].getAttribute("href"); 
if (window.location.href.indexOf(linkurl) != -1) { 


links[i].className = "here"; 


we 
addLoadEvent(highlightPage); 


保存 包含 这 个 函数 的 global.js 文件 。 刷 新 index.html 之 后 ， 你 就 会 看 到 Home 链接 突出 显 


示 了 ， 如 图 12-8 所 示 。 
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利用 highlightPage 国 数 ， 还 可 以 达到 一 稍 双 雕 的 目的 。 

通过 给 每 个 页 面 的 body 元 素 添加 id 属性 ， 可 以 为 每 个 页 面 应 用 不 同 的 样式 。 为 了 给 每 个 页 
面 添加 独特 的 id 属性 ， 可 以 取得 并 使 用 当前 链接 ( 即 添加 here 类 的 链接 ) 中 的 文本 。 但 需要 使 
用 JavaScript 的 toLowerCase 方 法 把 该 文本 转换 成 小 写 形 式 ; 

var linktext = links[i].1astChild.nodeValue.toLoweTCase(); 

这 样 就 取得 了 当前 链接 最 后 一 个 子 元 素 的 值 ,也 就 是 链接 的 文本 , 然后 把 它 转换 成 小 写 形式 。 
如 果 链 接 中 的 文本 是 “Home”， 那 么 1inktext 变量 中 保存 的 值 就 是 "home"。 通 过 下 面 的 语句 就 可 
以 把 这 个 变量 的 值 设置 为 body 元 素 的 id 属性 了 : 


document.body.setAttribute("id",1linktext); 
这 条 语句 就 相当 于 在 <body> 标 签 中 添加 了 id="home"。 
现在 的 highlightPage 函数 如 下 所 示 : 


function highlightPage( href ) { 
if (ldocument.getElementsByTagName) return false; 
if (!document.getElementById) return false; 
var headers = document.getElementsByTagName( ‘header' ); 
if (headers.length == 0) return false; 
var navs = headers[0] .getElementsByTagName( 'nav' ); 
if (navs.length == 0) return false; 
var links = navs[0] .getElementsByTagName("a"); 
var linkurl; 
for (var i=0; i<links.length; i++) { 
linkurl = links[i].getAttribute("href"); 
if (window.location.href.indexOf(linkurl) != -1) { 
links[i].className = "here"; 
var linktext = links[i].lastChild.nodeValue.toLowerCase(); 
document.body.setAttribute("id",1linktext); 


} 
} 
addLoadEvent (highlightPpage); 
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于 是 ，index.html] 文件 的 body 元 素 就 会 有 一 个 值 为 "home" 的 id，about.html 文件 中 的 id 就 是 
"about"，photos.html 文件 中 的 id 将 是 "photos"， 依 次 类 推 。 

新 加 入 的 这 些 标识 符 都 可 以 成 为 CSS 中 的 挂钩 。 例 如 ， 可 以 利用 这 些 id 为 不 同 页 面 的 头 部 
应 用 不 同 的 背景 图 像 。 

接 下 来 为 每 个 页 面 制作 一 幅 图 像 ,大 小 为 250 x 250px。 也 可 以 使 用 我 已 经 做 好 的 :1ineup.gif、 
passhead.gif、bassist.gif 和 drummer.gif， 把 它们 都 放 到 images 文件 夹 中 。 

然后 就 可 以 更 新 1ayout .css 文件 ， 添 加 background-image 声明 : 


#about header { 
background-image: url(../images/lineup.gif); 


#photos header { 
background-image: url(../images/basshead.gif); 


#live header { 
background-image: url(../images/bassist.gif); 


} 
#contact header { 
background-image: url(../images/drummer.gif); 


如 此 一 来 ， 每 个 页 面 的 头 部 就 会 应 用 不 同 的 背景 图 像 了 。 
12.5.2 ” JavaScript 幻灯 片 


主页 还 需要 美化 一 下 。 毕 帝 ，, 大 多 数 访 客 都 要 先 访问 主页 ， 在 其 中 添加 一 些 炫 醋 功 能 是 非常 
有 必要 的 。 第 10 章 讨论 的 JavaScript 幻 灯 片 用 在 这 里 正 合适 。 

在 "intro" 那 一 段 文字 中 , 有 指向 站 点 其 他 页 面 的 所 有 链接 。 如 果 在 访客 把 鼠标 放 到 相应 链接 
上 的 时 候 ， 能 够 让 他 们 得 到 有 关 页 面 的 一 点 信息 应 该 不 错 。 在 这 里 ， 可 以 显示 相应 页 面 头 部 图 像 
的 缩小 版 。 

把 每 一 幅 图 像 缩 小 为 150 x 150px， 然 后 合并 为 750px 长 的 一 张 图 ， 命 名 为 S1ideshow.gif。 
把 这 张 图 放 在 images 文件 夹 中 。 

组 合 后 的 图 像 如 图 12-9 所 示 。 


function moveElement(elementID,final x,final y,interval) { 
if (!document.getElementById) return false; 
if (!document.getElementById(elementID)) return false; 
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var elem = document.getElementById(elementID); 
if (elem.movement) { 
clearTimeout (elem.movement); 


} 
if (lelem.style.left) { 
elem.style.left = "Opx"; 


if (lelem.style.top) { 
elem.style.top = "Opx"; 


var xpos = parseInt(elem,.style.1left); 

var ypos = parseInt(elem.style.top); 

if (xpos == final x && ypos == final y) { 
return true; 


if (xpos < final x) { 
var dist = Math.ceil((final x - xpos)/10); 
xpos = xpos + dist; 


if (xpos > final x) { 
var dist = Math.ceil((xpos - final x)/10); 
xpos = xpos - dist; 


if (ypos < final y) { 
var dist = Math.ceil((final y - ypos)/10); 
ypos = ypos + dist; 


if (ypos > final y) { 
var dist = Math.ceil((ypos - final y)/10); 
ypos = ypos - dist; 


elem.style.left = xpos + "px"; 

elem.style.top = ypos + "px"; 

Var repeat = "moveElement('"+elementID+"',"+final x+","+final y+","+interval+")"; 
elem.movement = setTimeout(repeat,interval); 


} 
现在 应 该 创建 幻灯 片 元 素 并 准备 相应 链接 了 。 在 此 , 我 们 把 幻灯 片 直 接 放 在 文档 中 的 "intro" 
段落 后 面 。 


function prepareSlideshow() { 

if (!document.getElementsByTagName) return false; 

if (!document.getElementById) return false; 

if (!document.getElementById("intro")) return false; 
var intro = document.getElementById("intro"); 

var slideshow = document.createElement ("div"); 
slideshow.setAttribute("id","slideshow" ); 

var preview = document.createElement("img"); 
preview.setAttribute("src","images/slideshow.gif"); 
preview,. setAttribute("alt","a glimpse of what awaits you"); 
preview. setAttribute("id","preview" ); 
slideshow.appendChild(preview); 
insertAfter(slideshow, intro); 


接着 循环 遍历 "intro" 段 落 中 的 所 有 链接 ， 并 根据 当前 鼠标 所 在 的 链接 来 移动 preview 元 素 。 
比如 说 ， 如 果 链 接 的 href 值 中 包含 字符 串 "about .html"， 就 把 preview 元 素 移动 到 -150px 的 位 置 
上 ; 如 果 链 接 的 nref 值 中 包含 字符 串 "photos.html"， 就 把 preview 元 素 移 动 到 -300px 的 位 置 上 ， 
依次 类 推 。 
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为 了 让 动画 效果 看 起 来 很 籼 ， 给 moveElement 函数 传人 仅 为 5 毫秒 的 interval 值 : 


var links = intro.getElementsByTagName("a"); 
var destination; 
for (var i=0; iclinks.length; i++) { 
links[i].onmouseover = function() { 
destination = this.getAttribute("href"); 
if (destination,indexOf("index.html”) != -1) { 
moveElement("preview" ,0,0,5); 


} 
if (destination,indexOf("about.html") != -1) { 
moveElement("preview",-150,0,5); 


} 
if (destination.indexOf("photos.htm]l") != -1) { 
moveElement("preview",-300,0,5); 


} 
if (destination,.indexOf("live.html") != -1) { 
moveElement("preview" ,-450,0,5); 


} 
if (destination,indexOf("contact.html") != -1) { 
moveElement("preview" ,-600,0,5); 
} 
} 
} 
} 


还 要 通过 addLoadEvent 调用 这 个 函数 : 
addLoadEvent(prepareSlideshow); 


保存 91obal .js 文件 。 
当然 ， 还 得 更 新 样式 ， 在 1ayout .css 中 添加 如 下 声明 : 
#slideshow { 

width: 150px; 

height: 150px; 

position: relative; 

overflow: hidden; 


} 
#preview { 
position: absolute; 
border-width: 0; 
outline-width: 0; 
} 
在 浏览 器 中 刷新 index.html， 试 一 试 幻 灯 片 的 效果 。 
看 起 来 还 不 错 。 要 是 把 动画 效果 放 到 一 个 小 窗口 里 ， 就 更 完美 了 。 
创建 一 幅 150 x 150px 的 图 像 ， 它 的 绝 大 部 分 都 透明 ， 只 有 四 个 圆 角 是 与 内 容 div 颜色 相同 
的 。 把 它 命 名 为 frame.gif 并 保存 在 images 文件 夹 中 。 
把 下 列 代码 添加 到 global .js 中 的 prepares1ideshow 国 数 中 ， 放 到 创建 slideshow 元 素 的 代码 


后 面 : 


var frame = document.createElement("img"); 


frame.setAttribute("src","images/frame.gif"); 
frame.setAttribute("alt",""); 


frame.setAttribute("id","frame" ); 
slideshow.appendChild(frame); 12 
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为 保证 这 个 小 窗口 出 现在 动画 之 上 ， 还 要 在 1ayout.css 中 加 入 如 下 代码 : 


#frame { 
position: absolute; 
top: 0; 
left: 0; 
z-index: 99; 


到 


链接 也 能 触发 幻灯 片 ， 可 以 把 下 面 这 行 代码 : 
var links = intro.getElementsByTagName("a"); 


改 为 : 


新 index.html， 再 试 试 幻灯 请 效果 ， 现 在 


图 像 应 该 会 1 


var links = document.getElementsByTagName("a"); 


完成 后 的 prepareS1ideshow 函数 如 下 所 示 : 


function prepareSlideshow() { 


if (!document.getElementsByTagName) return false; 


if (ldocument.getElementById) return false 


2 


if (ldocument.getElementById("intro")) return false; 
var intro = document.getElementById("intro"); 
var slideshow = document.createElement("div"); 


slideshow.setAttribute("id","slideshow" ); 
var frame = document.createElement("img"); 


frame.setAttribute("src","images/frame.gif"); 


frame.setAttribute("alt",""); 
frame.setAttribute("id","frame"); 
slideshow.appendChild(frame); 

var preview = document.createElement("img" 


); 


preview.setAttribute("src","images/slideshow.gif"); 
preview. setAttribute("alt","a glimpse of what awaits you"); 


preview.setAttribute("id","preview"); 
slideshow.appendChild(preview); 
insertAfter(slideshow,intro); 


Var links = document.getElementsByTagName("a"); 


var destination; 
for (var i=0; i<links.length; i++) { 
links[i].onmouseover = function() { 
destination = this.getAttribute("href" 
if (destination.indexOf("index.html") 
moveElement ("preview" ,0,0,5); 


); 
1= 


-1) { 


} 
if (destination.indexOf("about.html") != -1) { 


moveElement ("preview" ,-150,0,5); 


} 
if (destination.indexOf("photos.html") != -1) { 


moveElement ("preview" ,-300,0,5); 


} 
if (destination,.indexOf("live.html") != -1) { 


moveElement("preview",-450,0,5); 


} 
if (destination.indexOf("contact.htm]l") != -1) { 


moveElement ("preview" ,-600,0,5); 


现在 小 窗口 里 面 了 。 
目前 , 访客 的 鼠标 放 到 "intro" 段 落 中 的 链接 上 时 会 触发 幻灯 片 动画 。 如 果 想 


让 导航 div 中 的 
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} 
addLoadEvent(prepareSlideshow); 


这 样 ， 把 鼠标 放 在 导航 链接 上 ， 也 将 会 触发 幻灯 片 ， 如 图 12-10 所 示 。 
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图 12-10 


12.5.3 ”内 部 导航 


站 点 中 的 下 一 页 是 About 页 面 。 在 about .html 的 <article> 元 素 中 添加 如 下 标记 : 


<h1>About the band</hi> 
<nav> 
<U]> 
“li><a hzef= #jay">Jay Skript</a></1i> 
<li><a href="#domsters">The Domsters</a></1i> 
</ul> 
</nav> 
<section id="jay"> 
<h2>Jay Skript</h2> 
<p>Jay Skript is going to rock your world!</p> 
<p>Together with his compatriots the Domsters, 
Jay is set for world domination. Just you wait and see.</p> 
<p>Jay Skript has been on the scene since the mid 1990s. 
His talent hasn't always been recognized or fully appreciated. 
In the early days, he was often unfavorably compared to bigger, 
similarly named artists. That's all in the past now.</p> 
</section> 
<Section id="domsters"> 
<h2>The Domsters</h2> 
<p>The Domsters have been around, in one form or another, 
for almost as long. It's only in the past few years that the Domsters 
have settled down to their current, stable lineup. 
Now they're a rock-solid bunch: methodical and dependable.</p> 
</section> 
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然后 ，About 页 面 如 图 12-11 所 示 。 
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似乎 还 可 以 ， 但 就 是 页 面 有 点 长 了 。 知 道 为 什么 <nav> 元 素 中 包含 内 部 链接 吗 ? 就 是 为 了 解 
决 这 个 问题 。 单 击 <snav> 中 的 每 个 链接 ， 都 会 跳 到 带 有 相应 id 属性 的 <section>。 

而 使 用 JavaScript 和 DOM， 还 可 以 选择 性 地 每 次 只 显示 其 中 一 个 部 分 (section)。 把 下 面 这 
个 函数 添加 到 global.js 中 ， 它 能 够 根据 指定 的 id 显示 相应 的 <section>， 同 时 隐藏 其 他 部 分 : 


function showSection(id) { 
var sections = document.getElementsByTagName("section"); 
for (var i=0; i<sections.length; i++ ) { 
if (sections[i].getAttribute("id") != id) { 
sections[i].style.display = "none"; 
} else { 
sections[i].style.display = "block"; 


} 
} 


这 个 showSection 函数 的 用 途 是 修改 每 个 部 分 的 display 样式 属性 .除了 与 作为 参数 传 入 的 id 
对 应 的 部 分 ,其 他 部 分 的 display 属性 都 将 被 设置 为 "none", 而 与 传 入 记 对 应 的 那个 部 分 的 display 
属性 则 被 设置 为 "block"。 

然后 ， 还 需要 在 <article> 中 的 <nav> 所 包含 的 链接 被 单 击 时 调用 showSection 函数 。 

创建 一 个 名 为 prepareInternalnav 的 国 数 ， 先 从 循环 遍历 <article> 中 的 <nav> 所 包含 的 链接 
开始 : 
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function prepareInternalnav() { 
if (!document.getElementsByTagName) return false; 
if (!document.getElementById) return false; 
var articles = document.getElementsByTagName("article"); 
if (articles.length == 0) return false; 
var navs = articles[0].getElementsByTagName( "nav" ); 
if (navs.length == 0) return false; 
var nav = navs[0]; 
var links = nav.getElementsByTagName("a"); 
for (var i=0; ixlinks.length; i++ ) { 


每 个 链接 的 href 属性 中 都 包含 对 应 部 分 的 id， 开 头 的 “#” 表示 内 部 链接 。 要 提取 每 一 部 分 
的 id 值 ， 可 以 使 用 split 方 法 。 这 是 根据 分 隔 符 把 一 个 字符 串 分 成 两 或 多 部 分 的 一 种 便捷 方式 : 

array = string.split(character) 

这 里 ,我 们 想 要 的 是 “#” 后 面 的 字符 串 ， 因 此 可 以 以 “#” 为 分 隔 符 ,得 到 的 数组 中 包含 两 
个 元 素 : 第 一 个 元 素 是 “#” 前 面 的 所 有 字符 (在 此 是 空 字 符 串 )， 第 二 个 元 素 则 是 后 面 的 所 有 字 
符 。 还 记得 吧 ， 数 组 中 第 一 个 元 素 的 索引 是 0， 而 我 们 想 要 的 是 数组 中 的 第 二 个 元 素 ， 它 的 索引 
是 1。 

var sectionId = links[i].getAttribute("href").split("#")[1]; 

这 样 就 可 以 把 “#” 后 面 的 字符 串 提 取出 来 并 保存 到 sectionId 变量 

再 添加 一 个 简单 的 测试 ， 确 保 真 的 存在 带 有 相应 id 的 元 素 。 如 果 不 存 在 ， 则 继续 下 一 次 
循环 。 

if (ldocument.getElementById(sectionId)) continue; 

在 页 面 加 载 后 ， 需 要 默认 隐藏 所 有 部 分 。 下 面 这 行 代码 可 以 解决 问题 : 

document. getElementById(sectionId).style.display = "none"; 

接 下 来 可 以 给 链接 添加 onclick 事件 处 理 函 数 ， 以 便 链 接 被 单 击 后 ， 把 sectionId 传 给 
showSection 函数 。 但 这 里 存在 作用 域 问 题 。 因 为 变量 sectionId 是 一 个 局 部 变量 ， 它 只 有 在 
prepareInternalnav 国 数 执行 期 间 存在 ， 等 到 了 事件 处 理 函 数 执行 的 时 候 它 就 不 存在 了 。 

要 解决 这 个 问题 ， 可 以 为 每 个 链接 创建 一 个 自 定义 的 属性 。 比 如 把 这 个 属性 命名 为 
destination， 然 后 把 sectionId 的 值 赋 给 它 : 


links[i].destination = sectionId; 
这 个 属性 的 作用 域 是 持久 存在 的 。 回 头 ， 我 们 可 以 在 事件 处 理 函 数 中 再 查询 这 个 属性 : 


links[i].onclick = function() { 
showSection(this,. destination); 
return false; 


为 prepareInternalnav 国 数 加 上 几 个 花 括 号 ， 结 束 它 的 定义 。 再 通过 addLoadEvent 函数 调 
用 它 : 
addLoadEvent(prepareInternalnav); 


以 下 是 global.js 中 的 prepareInternalnav 国 数 : 
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function prepareInternalnav() { 

if (!document.getElementsByTagName) return false; 

if (!document.getElementById) return false; 

var articles = document.getElementsByTagName("article"); 

if (articles.length == 0) return false; 

var navs = articles[0].getElementsByTagName( "nav" ); 

if (navs.length == 0) return false; 

var nav = navs[0]; 

var links = nav.getElementsByTagName("a"); 

for (var i=0; i<links.length; i++ ) { 
var sectionId = links[i].getAttribute("href").split("#")[1]; 
if (!document.getElementById(sectionId)) continue; 
document getElementById(sectionId).style.display = "none”; 
links[i].destination = sectionId; 
links[i].onclick = function() { 

showSection(this.destination); 
return false; 

} 

} 

} 


addLoadEvent(prepareInternalnav); 
在 浏览 器 中 打开 about .html， 测 试 一 下 刚才 实现 的 功能 。 单 击 一 个 内 部 链接 ， 应 该 只 会 显示 
相关 的 部 分 。 图 12-12 只 是 显示 了 一 个 部 分 的 About 页 面 。 
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页 面 越 长 ， 这 个 功能 的 效果 就 越 明 显 。 例 如 ， 要 是 有 一 个 常见 问题 页 面 ， 那 么 每 个 问题 都 可 
以 作为 内 部 链接 来 处 理 。 而 单 击 一 个 问题 ,就 会 显示 出 与 该 问题 对 应 的 答案 ,与 此 同时 其 他 问题 
的 答案 并 不 显示 。 


12.5.4 ”JavaScript 图 片 库 
接 下 来 我 们 来 制作 photos .html ， 这 个 页 面 是 使 用 JavaScript 构建 图 片 库 的 理想 之 所 。 
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客户 提供 了 Jay Skript 和 Domsters 演出 的 四 张 照 片 ， 大 小 为 400 x 300px: 
DQ concert.jpg 
DQ bassist.jpg 
DO guitarist.jpg 
DQ crowd.jpg 

在 images 文件 夹 里 创建 一 个 名 为 photos 的 文件 夹 ， 把 这 四 张 照片 放 到 里 面 。 再 为 每 张 照片 
分 别 创建 100 x 100px 的 缩 略图 ; 
DO thumbnail concert.jpg 
DO thumbnail bassist.jpg 
OD thumbnail guitarist.jpg 
DO thumbnail crowd.jpg 
把 这 些 照片 也 放 在 photos 文件 夹 中 。 
创建 一 组 链接 ,指向 全 尺寸 照片 。 为 这 个 列表 指定 id 为 "imagegalery"。 在 每 个 链接 中 添加 一 
g> 标 签 ， 各 个 标签 的 Src 属性 分 别 指向 不 同 的 缩 略 图 。 


<h1>Photos of the band</h1> 
<ul id= "imagegallery "> 
《1i> 
<a href="images/photos/concert.jpg" title="The crowd goes wild "> 
<img src="images/photos/thumbnail concert.jpg"” alt= the band in concert" /> 
</a> 
</1i> 
<1i> 
<a href="images/photos/bassist.jpg" title="An atmospheric moment"> 
<img src="images/photos/thumbnail bassist.jpg" alt="the bassist" /> 
</a> 
</1i> 
<1i> 
<a href="images/photos/guitarist.jpg" title="Rocking out"> 
<img src="images/photos/thumbnail guitarist.jpg” alt="the guitarist" /> 
</a> 
</1i> 
<1i> 
<a href="images/photos/crowd.jpg” title="Encore! Encorel > 
<img src="images/photos/thumbnail crowd.jpg" alt="the audience” /> 
</a> 
</1i> 
</ul> 


把 这 组 链接 放 到 photos.html 的 <article> 元 素 中 。 
更 新 1ayout .css 文件 ， 让 缩 略图 片 从 垂直 排列 变 成 水 平 排列 (如 图 12-13 所 示 )。 


#imagegallery li { 
display: inline; 


全 


个 < 


和 


为 了 让 图 片 库 的 脚本 正常 运行 ， 还 需要 再 制作 一 个 占 位 符 图 片 。 把 这 个 图 片 命 名 为 
placeholder.gif 并 放 到 images 文件 夹 中 。 
接 下 来 就 可 以 把 第 6 章 和 第 7 章 编写 的 图 片 库 脚 本 放 到 scripts 文件 夹 的 global.js 文件 中 。 
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function showPic(whichpic) { 
if (!document.getElementById("placeholder")) return true; 
var source = whichpic.getAttribute("href"); 
var placeholder = document.getElementById("placeholder"); 
placeholder. setAttribute("src", source); 
if (!document.getElementById("description")) return false; 
if (whichpic.getAttribute("title")) { 
var text = whichpic.getAttribute("title"); 
} else { 
Var text = ""; 


var description = document.getElementById("description"); 
if (description.firstChild.nodeType == 3) { 
description.firstChild.nodeValyue = text; 


return false; 


} 


function preparePlaceholder() { 
if (ldocument.createElement) return false; 
if (!document,.createTextNode) return false; 
if (!document.getElementById) return false; 
if (!document.getElementById("imagegallery")) return false; 
var placeholder = document,.createElement("img"); 
placeholder. setAttribute("id","placeholder" ); 
placeholder. setAttribute("src", “images/placeholder. gif"); 
placeholder. setAttribute("alt", "my image gallery"); 
var description = document.createElement("p"); 
description.setAttribute("id","description"); 
var desctext = document .createTextNode( "Choose an image” ); 
description.appendChild(desctext); 
var gallery = document.getElementById("imagegallery"); 
insertAfter(description,gallery); 
insertAfter(placeholder, description); 
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function prepareGallery() { 
if (!document.getElementsByTagName) return false; 
if (ldocument.getElementById) return false; 
if (ldocument.getElementById("imagegallery")) return false; 
var gallery = document.getElementById("imagegallery"); 
var links = gallery.getElementsByTagName("a"); 
for ( var i=0; i < links.length; i++) { 
links[i].onclick = function() { 
return showPic(this); 
} 
} 
} 


addLoadEvent(preparePplaceholder); 
addLoadEvent (prepareGallery); 


只 有 一 处 微小 的 变化 : description 中 的 文本 被 放 到 了 placeholder 图 像 的 上 方 。 
在 浏览 器 中 打开 photos.html， 试 验 一 下 效果 (如 图 12-14 所 示 )。 
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图 12-14 


12.5.5 ”增强 表格 


客户 给 我 们 提供 了 Jay Skript 和 Domsters 的 巡演 日 程 。 每 场 广 出 ， 都 有 一 个 日 期 (date)、 一 
个 城市 〈city) 和 一 个 地 点 (venue)。 显 然 ， 这 是 表 列 数据 。 因 此 ，Live 页 面 应 该 包含 一 个 巡演 
表格 。 
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<h1i>Tour dates</h1i> 
<table summary="when and where you can see the band"> 
<thead> 
<tr> 
<th>Date</th> 
<th>City</th> 
<th>Venue</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>June 9th</td> 
<td>Portland, <abbr title="0Tregon">OR</abbr></td> 
<td>Crystal Ballroom</td> 
</tr> 
<tr> 
<td>June 10th</td> 
<td>Seattle, <abbr title="Washington">WA</abbr></td> 
<td>Crocodile Cafe</td> 
</tr> 
<tr> 
<td>June 12th</td> 
<td>Sacramento, «abbr title="California">CA</abbr></td> 
<td>Torch Club</td> 
</tr> 
<tr> 
<td>June 17thx</td> 
<td>Austin, <abbr title="Texas">TX</abbr></td> 
<td>Speakeasy</td> 
</tr> 
</tbody> 
</table> 


把 这 个 <table> 放 到 1ive.html 中 的 <article> 元 素 内 。 
接着 再 在 1ayout .css 中 为 表格 中 的 单元 格 应 用 一 些 样 式 : 


td{ 
padding: .5em 3em; 


更 新 color.css， 为 表 头 和 表格 选 定 指定 颜色 : 


th { 
color: #edc; 
background-color: #455; 


tr td { 
color: #223; 
background-color: #eb6; 


在 浏览 器 中 打开 live.html 后 ， 可 以 看 到 一 个 普 普 通通 、 丝 毫 没 有 应 用 什么 脚本 的 表格 (如 
图 12-15 所 示 )。 

此 时 ,正好 可 以 把 第 9 章 定 义 的 表格 样式 化 的 函数 stripeTables 及 highlightRows 拿 过 来 使 用 。 
还 可 以 把 第 8 章 的 displayAbbreviations 函数 借用 过 来 。 
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图 12-15 


把 这 几 个 函数 全 都 添加 到 global.js 文件 中 ， 并 通过 addLoadEvent 调用 它们 : 


function stripeTables() { 

if (!document.getElementsByTagName) return false; 
var tables = document.getElementsByTagName("table" ); 
for (var i=0; i<tables.length; i++) { 

var odd = false; 

Var rows = tables[i].getElementsByTagName("tr"); 

for (var j=0; j<rows.length; j++) { 

if (odd == true) { 
addClass(rows[j],"o0dd"); 


odd = false; 
} else { 
odd = true; 


} 
} 
} 
} 


function highlightRows() { 
if(!document.getElementsByTagName) return false; 
Var rows = document.getElementsByTagName("tr"); 
for (var i=0; i<rows.length; i++) { 
rows[i] .oldClassName = rows[i].className 
rows[i] .onmouseover = function() { 
addClass(this,"highlight"); 


rows[i] .onmouseout = function() { 
this.className = this.oldClassName 
} 
} 
} 


function displayAbbreviations() { 
if (ldocument.getElementsByTagName || !document.createElement 
ww || !document.createTextNode) return false; 
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var abbreviations = document.getElementsByTagName("abbr"); 
if (abbreviations.length < 1) return false; 
var defs = new Array(); 
for (var i=0; i<abbreviations.length; i++) { 
var current abbr = abbreviations[i]; 
if (current abbr.childNodes.length < 1) continue; 
var definition = current abbr.getAttribute("title"); 
var key = current abbr.1astChild.nodeValue; 
defs[key] = definition; 


var dlist = document.createElement("dl"); 

for (key in defs) { 
var definition = defs[key]; 
var dtitle = document.createElement("dt"); 
var dtitle text = document.createTextNode(key); 
dtitle.appendChild(dtitle text); 
var ddesc = document.createElement("dd"); 
var ddesc text = document.createTextNode(definition); 
ddesc.appendChild(ddesc text); 
dlist.appendChild(dtitle); 
dlist.appendChild(ddesc); 


} 

if (dlist,.childNodes.length < 1) return false; 

var header = document.createElement("h3"); 

var header text = document.createTextNode("Abbreviations"); 
header.appendChild(header text); 

var articles = document.getElementsByTagName("article"); 

if (articles.length == 0) return false; 

var container = articles[0]; 

container.appendChild(header); 
container.appendChild(dlist); 


} 


addLoadEvent(stripeTables); 
addLoadEvent (highlightRows); 
addLoadEvent(displayAbbreviations); 


在 此 ，highlightRows 和 displayAbbreviations 函数 都 稍 有 改动 。 

口 highlightRows: 没有 像 以 前 那样 直接 应 用 样式 属性 ， 而 是 使 用 addClass 函数 添加 了 highlight 
类 。 这 个 类 会 在 用 户 鼠 标 悬 停 在 表格 行 上 的 时 候 应 用 。 在 应 用 新 类 名 之 前 ， 先 把 原来 的 
className 保存 到 名 为 oldClassName 的 自 定 义 属 性 中 。 当 用 户 的 鼠标 离开 表格 行 之 后 ， 再 
把 className 属性 重 置 回 原来 的 ol1dClassName 值 。 

D displayAbbreviations: 修改 了 最 后 几 行 代 码 ， 因 为 这 里 要 找 的 是 article 元素 ， 而 不 是 第 
8 章 id 为 content 的 div 元素。 

这 两 处 修改 也 提醒 我 们 ， 以 前 定义 的 函数 仍然 需要 进一步 抽象 。 比 如 说 ， 可 以 为 

displayAbbreviations 函数 再 增加 一 个 参数 ， 以 便 指 明 把 新 创建 的 列表 添加 到 哪个 元 素 中 。 
还 要 更 新 layout .css， 再 添加 一 些 样式 : 


dlL { 
overflow: hidden; 


} 
dt { 
float: left; 
} 
dd { 
float: left; 
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} 


再 更 新 typography .css: 


dt { 
margin-right: 1em; 


dd { 
margin-right: 3em; 


最 后 ， 在 color.css 中 为 odd 和 highlight 类 添加 颜色 样式 : 


tr.odd td { 
COlor: #223; 
background-color: #ec8; 


} 

tr.highlight td { 
COlor: #223; 
background-color: #cba; 


在 浏览 器 中 打开 1ive.html1， 看 一 看 增强 之 后 的 <table> 吧 。 此 时 ， 偶 数 行 都 会 有 一 个 odd 类 
(如 图 12-16 所 示 )。 
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12.5.6 ”增强 表单 
还 得 为 这 个 站 点 制作 一 个 很 重要 的 页 面 ， 这 个 页 面 能 够 让 乐队 的 粉丝 们 跟 乐 手 沟 通 。 
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想 一 想 ， 差 不 多 任何 网 站 都 会 公布 一 些 联系 信息 ,哪怕 只 是 一 个 电子 邮件 地 址 。 对 眼下 这 个 
网 站 来 说 ， 你 打算 构建 一 个 联系 表单 。 

联系 表单 ， 和 其 他 任何 类 型 的 表单 一 样 , 都 需要 某 种 服务 器 端 技术 来 进一步 验证 并 把 数据 保 
存 到 后 台数 据 库 或 系统 中 。Perl、PHP、ASP 以 及 其 他 服务 器 端 编程 语言 都 是 可 选 的 技术 。 但 我 
们 这 个 例子 不 会 涉及 服务 器 端 肢 本， 而 是 会 创建 一 个 极为 普通 的 HTML 页 面 ， 向 访客 显示 感谢 
信息 。 访 客 填充 的 信息 也 不 会 发 送 到 哪 去 〈 别 忘 了 ， 乐 队 是 我 们 虚构 的 ) 。 假 如 真有 这 人 么 一 个 网 
站 ,就 必须 得 有 服务 器 端 脚 本 来 处 理 用 户 提交 的 数据 ， 把 它们 保存 到 数据 库 中 , 或 者 通过 邮件 转 
发 给 适当 的 人 ， 然 后 才 显 示 感 谢 信 息 。 

创建 一 个 文件 ， 命 名 为 contact .html]， 当 然 这 个 文件 要 基于 template.html 来 创建 ， 只 不 过 
<article> 中 要 包含 一 个 <form>: 


<h1>Contact the band</h1> 
<form method="post” action="submit.html"> 
<fieldset> 
<p> 
<label for="name">Name:</label> 
<input type="text" id="name" name="name" 
ww placeholder="Your name" required="required" /> 
</p> 
<p> 
<label for="email">Email:</label> 
<input type="email” id="email” name="email" 
= placeholder="Your email address” required="required" /> 
</p> 
<p> 
<label for="message">Message:</label> 
<textarea cols="45" rows="7" id="message" 
ww name="message" required="required" 
ww placeholder="Write your message here."></textarea> 


</p> 
<input type="submit" value="Send" /> 
</fieldset> 
</form> 
更 新 layout .css 文件 : 
label { 
display: block; 
fieldset { 
border: 0; 


这 样 ， 就 有 一 个 基本 的 联系 表单 ， 如 图 12-17 所 示 。 
接 下 来 ， 再 基于 template.html 创建 一 个 新 文件 ， 命 名 为 submit.html。 这 一 次 ，<article> 中 
包含 了 感谢 信息 。 


<h1>Thanks !</h1> 
<p>Thanks for contacting us. We'll get back to you as soon as we can.</p> 


这 个 submit .html 页 面 中 只 包含 感谢 信息 ， 不 处 理 表 单 提交 的 信息 ， 你 懂 的 (如 图 12-18 
所 示 )。 
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1. 字段 标签 


表单 中 有 三 个 字段 : name、email 和 message。 每 个 字段 都 有 一 个 对 应 的 <1abe1> 标 签 。 12 
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作为 增进 可 访问 性 的 元 素 ，1abel 非常 有 用 。 它 通过 for 属性 把 一 小 段 文 本 关联 到 表单 的 一 
个 字段 。 对 于 屏幕 阅读 器 来 说 ， 标 签 中 的 这 一 小 段 文 本 几乎 是 不 可 或 缺 的 。 
即使 是 那些 视力 没有 任何 问题 的 人 ，1abel 元 素 同 样 也 具有 不 可 低估 的 价值 。 很 多 浏览 器 都 
会 为 label 元 素 添加 默认 行为 如 果 label 中 的 文本 被 单 击 ， 关 联 的 表单 字段 就 会 获得 焦点 。 这 
对 于 增进 表单 的 可 用 性 是 很 有 帮助 的 。 然 而 ， 并 不 是 所 有 浏览 器 都 实现 了 该 行为 。 
可 能 上 述 行为 在 默认 情况 下 是 不 存在 的 , 但 我 们 为 何不 自己 添加 这 种 行为 呢 ? 所 需 的 只 
数 行 JavaScript 代码 而 已 。 
(1) 取得 文档 中 的 1abel 元 素 。 
(2) 如 果 label 有 for 属性 ， 添 加 一 个 事件 处 理 函 数 。 
(3) 在 label 被 单 击 时 ， 提 取 for 属性 的 值 。 这 个 值 就 是 相应 表单 字段 的 id 值 。 
(4) 确保 存在 相应 的 表单 字段 。 
(5) 让 相应 的 表单 字段 获得 焦点 。 
在 91lobal.js 中 添加 函数 focusLabels， 并 通过 addLoadEvent 函数 在 页 面 加 载 时 执行 该 函数 。 
function focusLabels() { 
if (!document.getElementsByTagName) return false; 
var labels = document.getElementsByTagName("label"); 
for (var i=0; i<labels.length; i++) { 
if (!labels[i].getAttribute("for")) continue; 
labels[il].onclick = function() { 
var id = this.getAttribute("for"); 
if (!document.getElementById(id)) return false; 


var element = document.getElementById(id); 
element. focus(); 


} 
Dd ee 
在 浏览 器 中 加 载 contact .html 页 面 ， 单 击 一 个 标签 就 会 把 焦点 转移 到 关联 的 表单 字段 中 。 也 
许 访客 使 用 的 浏览 器 不 支持 这 个 行为 。 但 现在 不 一 样 了 ， 现 在 所 有 浏览 器 都 会 支持 这 个 行为 。 
2. 占 位 符 值 
我 们 注意 到 ， 联 系 表单 中 的 每 个 字段 都 通过 HTML5 的 placeholder 属性 添加 了 占 位 符 文本 ， 
name 字段 中 有 "your name"，email 字段 中 有 "your email"， 等 等 。 


注意 从 增进 可 访问 性 的 角度 说 ， 占 位 符 值 也 很 有 价值 。Web Accessibility Initiative 指南 的 10.4 
节 指 出 ,，“ 在 用 户 代 理 能 够 正确 处 理 空 的 控件 之 前 , 应 该 在 可 编辑 文本 框 和 文本 区 中 添加 
默认 的 、 占 位 字符 。[ 优 先 级 3]。” 要 了 解 有 关 Web Accessibility Initiative 的 更 多 信息 ， 请 
访问 http:/www.w3.org/WA1。 


过 去 ， 有 些 浏 览 器 不 能 正确 识别 空 的 表单 字段 ， 从 而 为 键盘 导航 制造 了 麻烦 。 访客 无 法 通过 
按 Tab 键 进入 空 字段 。 
与 <1abe1> 标 签 类 似 , 增强 可 访问 性 对 任何 人 来 说 都 是 一 件 好 事 。 即 使 是 那些 不 使 用 键盘 导航 
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的 人 ， 看 到 表单 字段 中 显示 着 提示 文本 ， 也 会 觉得 非常 友好 。 

通过 HTML5 的 placeholder 属性 设置 占 位 符 值 有 一 个 缺点 , 那 就 是 使 用 上 日 版 本 浏览 器 的 用 户 
看 不 到 字段 中 的 占 位 符 文本 (字段 仍然 是 空 的 )。 

使 用 JavaScript 可 以 保证 字段 中 始终 可 以 显示 提示 信息 。 不 过 ， 这 一 次 我 们 不 再 使 用 DOM 
核心 的 方法 和 属性 ， 而 是 要 使 用 HIML DOM 中 最 常用 的 一 个 对 象 ， form 对 象 。 


form 对 象 


有 读者 可 能 知道 ，HTML 文档 中 的 每 个 元 素 都 是 一 个 对 象 。 每 个 元 素 都 有 nodeName、 
nodeType 之 类 的 DOM 属性。 

而 有 些 元 素 具 有 的 属性 比 DOM 核心 中 定义 的 还 要 多 。 文 档 中 的 每 个 表单 元 素 都 是 一 个 
form 对 象 , 每 个 form 对 象 都 有 一 个 elements .length 属性 。 这 个 属性 返回 表单 中 包含 的 表单 元 
素 的 个 数 : 

form.elements .length 

这 个 返回 值 与 childNodes.1ength 不 一 样 ， 后 者 返回 的 是 元 素 中 包含 的 所 有 节点 的 个 数 。 
而 form 对 象 的 elements.1ength 属性 只 关注 那些 属于 表单 元 素 的 元 素 ， 如 input、textarea, 等 
二 

相应 地 ， 表 单 中 的 所 有 字段 都 保存 在 form 对 象 的 elements 属性 中 。 也 就 是 说 ， 下 面 是 一 
个 包含 所 有 表单 元 素 的 数组 : 

form.elements 

同样 ,这 个 属性 与 childNodes 属性 也 不 一 样 ,后 者 也 是 一 个 数组 。childNodes 数组 返回 的 
是 所 有 和 节点， 而 elements 数组 则 只 返回 input、select、textarea 以 及 其 他 表单 字段 。 

elements 数组 中 的 每 个 表单 元 素 都 有 自己 的 一 组 属性 。 比 如 ，vValue 属性 中 保存 的 就 是 表 
单元 素 的 当前 值 : 

element .value 

这 行 代码 等 价 于 : 

element.getAttribute("value") 


包含 在 contact .html 中 的 每 个 表单 字段 都 有 一 个 初始 的 placeholder 属性 。 你 可 以 取得 这 些 
占 位 符 的 值 并 临时 将 它们 作为 相应 表单 字段 的 value。 而 在 该 字段 获得 焦点 时 ， 再 删除 字段 的 
value 值 。 类 似 地 ， 如 果 用 户 并 没有 在 字段 中 输入 文本 且 离 开 了 当前 字段 ， 那 么 再 重新 应 用 占 位 
符 值 即 可 。 这 个 例子 与 第 11 章 中 的 占 位 符 的 例子 是 类 似 的 。 

为 此 ， 你 需要 写 一 个 函数 ， 命 名 为 resetFields， 它 只 接受 一 个 form 对 象 作 为 参数 。 这 个 国 
数 执行 如 下 操作 。 

(1) 检查 浏览 器 是 否 支持 placeholder 属性 。 如 果 不 支持 ， 继 续 。 

(2) 循环 遍历 表单 中 的 每 个 元 素 。 

(3) 如 果 当 前 元 素 是 提交 按钮 ， 跳 过 。 
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(4) 为 元 素 获 得 焦点 的 事件 添加 一 个 处 理 函 数 。 如 果 字 有 段 的 值 等 于 占 位 符 文 本 ， 则 将 字段 的 
值 设置 为 空 
(5) 再 为 元 素 失 去 焦点 的 事件 添加 一 个 处 理 函 数 。 如 果 字 段 的 值 为 空 ， 则 为 其 添加 占 位 符 值 。 


(6) 


为 了 应 用 样式 ， 在 字段 显示 占 位 符 值 的 时 候 添 加 placeholder 类 。 


这 个 函数 的 定义 如 下 : 


function resetFields(whichform) { 
if (Modernizr.input.placeholder) return; 
for (var i=0; i<whichform.elements.length; i++) { 


} 


函数 中 用 到 了 两 个 事件 处 理 函 数 。 其 中 ， 


Var element = whichform.elements[i]; 
if (element.type == "submit") continue; 
var check = element.placeholder || element.getAttribute('placeholder' ); 
if (!check) continue; 
element.onfocus = function() { 
var text = this.placeholder || this.getAttribute('placeholder'); 
if (this.value == text) { 
this. className = 
this.value = ""; 


element.onblur = function() { 
if (this.value == 
this.className = “placeholder ; 
this.value = this.placeholder || this.getAttribute('placeholder'); 


element.onblur(); 


onfocus 事件 会 在 用 户 通过 按 Tab 键 或 单 击 表单 字 


段 时 被 触发 ， 而 onblur 事件 会 在 用 户 把 焦点 移出 表单 字段 时 触发 。 另 外 , 在 onblur 事件 定义 之 
后 ， 立 即 调用 了 它 ， 以 便 在 必要 时 应 用 占 位 符 值 。 


注意 鉴于 不 同 的 浏览 器 对 未 知 属 


把 resetFields 区 


placeholder 属性 和 DOM 的 getAttribute('placeholder') 方 法 。 


性 的 实现 方式 有 所 不 同 ， 这 里 同时 使 用 了 HTML DOM 的 


函数 添加 到 global.js 文件 中 。 但 我 们 需要 为 它 传 入 form 对 象 来 调用 它 。 再 编 


辑 一 个 函数 prepareForms, 循环 遍历 文档 中 的 所 有 form 对 象 , 并 将 每 个 form 对 象 传 给 resetFields 


国 数 。 


function prepareForms() { 
for (Var i=0; i<document.forms.length; i++) { 


} 
} 


Var thisform = document.forms[i]; 
resetrFields(thisform); 


使 用 addLoadEvent 函数 来 调用 prepareForms。 


add 


LoadEvent (prepareForms); 
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为 了 让 占 位 符 更 突出 一 点 ， 在 color.css 文件 中 通过 placeholder 类 修改 字段 的 颜色 : 


input.placeholder { 
color: grey; 


在 不 支持 HTML5 的 浏览 器 中 刷新 contact.html， 看 看 resetFields 函数 的 效果 如 何 。 你 会 
到 resetFields 函数 起 到 了 在 支持 HTML5 的 浏览 器 中 使 用 placeholder 属性 一 样 的 效果 。 

随便 单 击 几 个 字段 , 或 者 单 击 相 应 的 标签 试 一 试 。 默认 值 应 该 消失 。 如 果 在 没有 输入 文本 的 
情况 下 移动 到 另 一 个 字段 ， 默认 值 应 该 再 次 出 现 。 如 果 输 入 了 文本 ， 那 么 默认 值 就 不 应 该 再 出 
现 了 。 

3. 表单 验证 

围绕 联系 表单 的 下 一 个 任务 涉及 JavaScript 最 古老 的 用 途 。 

自从 JavaScript 诞生 之 日 起 ， 客 户 端 表单 验证 就 拉 开 了 序幕 。 想 法 很 简单 ， 就 是 在 用 户 提交 
表单 时 ， 对 提交 的 值 进行 一 番 测 试 。 如 果 必 填 字 段 留 空 ， 用 户 就 会 看 到 一 个 警告 框 ， 告 诉 他 哪个 
字段 必须 要 填写 内 容 。 

支持 HTML5 的 浏览 器 终于 针对 一 些 字段 实现 了 原生 的 表单 验证 。 例 如 ，Opera 10 可 以 自动 
验证 电子 邮件 字段 ， 如 图 12-19 所 示 。 

当 你 提交 包含 电子 邮件 输入 字段 的 表单 时 , Opera 会 基于 RFC 定义 的 电子 邮件 格式 来 验证 用 
户 的 输入 ， 而 且 启 不 启用 JavaScript 都 没有 关系 。HTML5 还 定义 了 其 他 类 型 的 字段 验证 ， 例 如 
URL 输入 字段 。 对 于 这 些 字段 而 言 ， 我 们 不 必 在 表单 中 添加 任何 额外 的 标记 ; 浏览 器 根据 输入 
字段 的 类 型 就 可 以 完成 验证 。 

HTML5S 也 提供 了 required 属性 , 用 于 表示 某 个 字段 的 值 是 必须 填写 不 能 留 空 的 , 如 图 12-20 
所 示 。Opera 10 同样 支持 不 依赖 任何 脚本 的 这 一 原生 特性 。 


Email: Name: 
myemaiLcom| | 有 | 
myemail.com is You have to 
not a legal email specify a value 
address 
图 12-19 图 12-20 


对 于 支持 HTML5 的 浏览 器 而 言 ， 这 是 个 好 消息 。 但 对 于 客户 委托 给 你 制作 的 这 个 乐队 网 站 
来 说 ， 还 必须 再 灵活 一 点 ， 还 得 再 添加 使 用 JavaScript 验证 表单 的 功能 。 

使 用 JavaScript 进行 表单 验证 听 起 来 没有 什么 ， 而 且 通 常 也 确实 如 此 。 但 如 果 JavaScript 验 
证 脚本 写 得 不 好 ， 也 会 带 来 负面 的 结果 。 假 如 代码 中 包含 错误 ， 最终 可 能 会 导致 用 户 根 本 无 法 提 
交 表 单 。 

在 使 用 JavaScript 编写 验证 表单 的 脚本 时 ， 要 记 住 三 件 事 。 


256 第 12 章 综合 示例 


D 验证 脚本 写 得 不 好 ， 反 而 不 如 没有 验证 。 
D 千 万 不 要 完全 依赖 JavaScript。 客 户 端 验证 并 不 能 取代 服务 器 端的 验证 。 即 使 有 了 
JavaScript 验证， 服务 器 端 照样 还 应 该 对 接收 到 的 数据 再 次 验证 。 
D 客户 端 验 证 的 目的 在 于 帮助 用 户 填 好 表单 ， 避 免 他 们 提交 未 完成 的 表单 ， 从 而 节省 他 们 
的 时 间 。 服 务 器 端 验证 的 目的 在 于 保护 数据 库 和 后 台 系 统 的 安全 。 
一 定 要 尽量 保证 验证 过 程 尽 可 能 简单 。 开 始 的 时 候 ， 可 以 只 检查 用 户 是 否 输入 了 什么 内 容 。 
下 面 这 个 函数 ，isFilled， 以 一 个 表单 元 素 作为 参数 : 


function isFilled(field) { 
if (field.value.replace(' ','').length == 0) return false; 
var placeholder = field.placeholder || field.getAttribute('placeholder' ); 
return (field.value != placeholder); 


通过 检查 去 掉 空格 之 后 的 value 属性 的 length 属性 ， 就 可 以 知道 value 中 是 否 没 有 任何 字符 
(不 都 是 空格 )。 如 果 确 实 不 包含 任何 字符 ， 函 数 返回 false。 否 则 ， 继 续 下 面 的 比较 。 

通过 比较 value 属性 与 placeholder 属性 , 就 可 以 知道 用 户 是 否 对 占 位 符 文本 一 字 未 动 。 如 果 
两 个 相同 ， 函 数 返 回 false。 如 果 上 面 两 个 测试 都 通过 ， 说 明 用 户 已 经 在 字段 中 填写 了 内 容 ， 
isFilled 函数 就 会 返回 true。 

接 下 来 一 个 类 似 的 函数 是 isEmail。 这 个 函数 会 进行 非常 简略 的 检查 ， 看 表单 字段 中 的 内 容 
是 不 是 一 个 电子 邮件 地 址 。 


function isEmail(field) { 
return (field.value.indexOf("@") != -1 && field.value.indexOf(".") != -1); 


这 个 函数 使 用 index0f 方法 执行 了 两 方面 测试 。 这 个 方法 用 于 在 一 个 字符 串 中 查找 另 一 个 字 
符 串 第 一 次 出 现 的 位 置 。 如 果 要 搜索 的 字符 串 存 在 ,， 则 返回 该 字符 串 第 一 个 字符 所 在 的 位 置 。 如 
果 没 有 找到 要 搜索 的 字符 串 ， 则 返回 -1。 函 数 中 的 第 一 个 测试 在 表单 字段 的 value 属性 中 搜索 @ 
符号 。 这 是 电子 邮件 中 绝 不 能 少 的 一 个 符号 。 如 果 没 有 找到 @，isEmail 函数 就 返回 false。 第 二 
个 测试 的 原理 相同 ， 只 不 过 搜索 的 是 句点 (.) 符号 。 如 果 在 表单 字段 的 value 属性 中 没有 找到 这 
个 字符 ， 那 么 函数 仍然 会 返回 false。 如 果 两 个 测试 都 通过 了 ，isEmail 函数 就 返回 true。 

这 个 isEmail 函数 并 不 十 分 可 靠 。 如 果 用 户 输入 了 一 个 伪造 的 电子 邮件 地 址 ， 甚 至 根本 就 不 
是 电子 邮件 地 址 的 字符 串 ， 验 证 也 有 可 能 通过 。 但 是 ,验证 写 得 太 过 复杂 并 不 是 件 好 事 。 验 证 越 
复杂 , 误 报 的 可 能 性 就 会 越 大 。 比 如 , 很 多 验证 电子 邮件 的 脚本 都 错误 地 假设 电子 邮件 的 域名 只 
能 是 三 个 字母 。 这 样 的 错误 假设 会 导致 域名 为 .info、.name 之 类 的 邮件 就 不 能 通过 验证 。 

现在 , 你 已 经 有 了 两 个 验证 函数 : isFilled 和 isEmail。 但 你 并 不 想 对 每 个 表单 字段 都 运行 它 
们 。 因 此 ， 还 需要 某 种 方式 来 指定 哪个 字段 是 必 填 的 ， 哪 个 字段 必须 输入 电子 邮件 地 址 。 

在 HIML 标记 中 ， 可 以 使 用 HIMLS 的 required 属性 : 


<input type= "text”id="name”name="name”Vvalue= "Your name”" required="required" /> 


<input type="email" id="email" name="email" value="Your email address" 
= required="required” /> 
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注意 这 里 的 代码 使 用 了 required = "required"， 而 不 是 仅 指 定 一 个 没有 值 的 required 属性 。 在 
HTMLS 中 ， 这 两 种 写法 都 是 有 效 的 ， 因 为 HTMLS 兼容 这 两 种 语法 。 尽 管 如 此 ， 我 还 是 
建议 读者 使 用 较为 严格 的 XHTML 语法 ， 也 就 是 说 所 有 属性 都 要 赋值 ， 而 且 单 独 的 标签 
要 添加 人 针 杠 (/)。 


在 CSS 文件 中 也 可 以 使 用 这 些 属性 。 例 如 ， 可 以 为 必 填 字段 添加 粗 一 些 的 边框 ， 或 者 应 用 
一 种 不 同 的 背景 颜色 。 
同样 ， 在 JavaScript 中 也 可 以 使 用 这 些 属 性 。 下 面 我 们 编写 一 个 名 为 validateForm 的 函数 。 
这 个 国 数 以 一 个 form 对 象 为 参数 ， 并 执行 下 列 操作 。 
(1) 循环 遍历 表单 的 elements 数组 。 
(2) 如 果 发 现 了 required 属性 ， 把 相应 的 元 素 传递 给 isFil1ed 函数 。 
(3) 如 果 isFilled 函数 返回 false， 显 示警 告 消 息 ， 并 且 validateForm 函数 也 返回 false。 
(4) 如 果 找 到 了 email 类 型 的 字段 ， 把 相应 的 元 素 传递 给 isEmail 国 数 。 
(5) 如 果 isEmail 国 数 返 回 false， 显 示警 告 销 息 ， 并 且 validateForm 函数 也 返回 false。 
(6) 否则 ，validateForm 函数 返回 true。 
下 面 就 是 完成 后 的 validateForm 函数 .: 
function validateForm(whichform) { 
for (var i=0; i<whichform.elements.length; i++) { 
var element = whichform.elements[i]; 
if (element.required == 'required') { 


if (!isFilled(element)) { 


alert("Please fill in the “+telement.name+" field."); 
return false; 


} 
if (element,.type == ‘email’) { 
if (!isEmail(element)) { 


alert("The "+element.name+" field must be a valid email address."); 
return false; 


} 


return true; 


这 样 ， 只 要 在 表单 被 提交 时 基于 表单 执行 validateForm 函数 就 可 以 了 。 为 此 ， 可 以 在 
prepareForms 函数 中 通过 onsubmit 事件 处 理 函 数 来 添加 验证 行为 : 
function prepareForms() { 
for (var i=0; i<document.forms.length; i++) { 

var thisform = document.forms[i]; 

resetFields(thisform); 

thisform.onsubmit = function() { 
return validateForm(this); 


} 
} 


无 论 什么 时 候 提 交 表单 ， 都 会 触发 submit 事件 ， 而 事件 会 被 onsubmit 事件 处 理 


HE 


国 数 拦截 。 
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执行 事件 处 理 函数 时 ， 会 将 表单 传递 给 validateForm 函数 。 如 果 validateForm 函数 返回 true， 就 
意味 着 可 以 把 表单 数据 提交 给 服务 器 。 而 如 果 validateForm 函数 返回 false， 提交 操 作 就 会 被 取消 。 
把 上 面 几 个 表单 验证 函数 都 保存 到 global .js 中 。 
在 浏览 器 中 刷新 contact .htm] 。 试 一 试 , 在 留 空 表单 或 保持 字段 中 默认 值 的 情况 下 提交 表单 。 
你 应 该 会 看 到 一 个 有 礼貌 的 警告 框 弹出 来 ， 告 诉 你 必须 解决 哪些 问题 才能 提交 表单 ， 如 图 12-21 
所 示 。 


图 12-21 


4. 提交 表单 

针对 联系 表单 的 最 后 一 项 改进 ， 就 是 给 页 面 添加 一 点 Ajax。 还 记得 前 面 创建 的 Submit .htm 
页 面 吗 ? 如 果 你 正确 地 提交 了 表单 ， 表 单 就 会 打开 submit.html 显示 感谢 信息 。 如 果 表 单 能 够 发 
送 一 个 Ajax 请 求 ， 而 感谢 信息 能 以 嵌入 方式 添加 到 表单 所 在 的 页 面 ， 那 种 体验 想必 会 更 好 。 说 
和 白 了 ， 就 是 表单 提交 成 功 之 后 ， 不 打开 新 页 面 了 ， 而 是 拦截 提交 请 求 ， 自 己 显示 结果 。( 关 于 拦 
截 的 介绍 请 参考 第 7 章 。) 

先 在 global .js 文件 中 添加 第 7 章 的 getHTTPObject 函数 : 


function getHTTPObject() { 
if (typeof XMLHttpRequest == "undefined") 
XMLHttpRequest = function () { 

try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); } 
catch (e) {} 

try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); } 
catch (e) {} 

try { return new ActiveXObject("Msxml2.XMLHTTP"); } 
catch (e) {} 

return false; 


return new XMLHttpRequest(); 
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然后 ， 创 建 一 个 加 载 图 像 ， 在 Ajax 请 求 刚 启动 时 把 它 添加 到 文档 中 。 如 果 你 手 上 没有 动画 
加 载 GIF， 可 以 到 http://ajaxload.info 去 创建 一 个 。 把 这 个 加 载 图 像 命名 为 loading.gif, 并 将 它 放 
在 images 文件 夹 中 。 

把 下 面 的 displayAjaxLoading 函数 添加 到 global .js 文件 中 。 这 个 函数 接受 一 个 DOM 元 素 作 
为 参数 ， 然 后 把 它 的 所 有 子 元 素 都 删除 掉 。 删 除 之 后 ， 再 把 1oading.gif 图 像 添 加 到 该 元 素 中 。 


function displayAjaxLoading(element) { 
while (element.hasChildNodes()) { 
element.removeChild(element.1astChild); 


var content = document. createElement(" img" ); 
content .setAttribute("src", "images/loading. gif"); 
content.setAttripute("alt","Loading..."); 

element. appendChild(content); 


好 玩 的 地 方 到 了 。 接 下 来 该 编写 submitFormWithAjax 函数 了 。 这 个 函数 的 第 一 个 参数 是 一 个 
form 对 象 ， 第 二 个 参数 是 一 个 目标 对 象 ， 并 执行 如 下 操作 。 

(1) 调用 displayAjaxLoading 函数 ， 删 除 目标 元 素 的 子 元 素 ， 并 添加 10ading.gif 图 像 。 

(2) 把 表单 的 值 组 织 成 URL 编码 的 字符 串 ， 以 便 通 过 Ajax 请 求 发 送 。 

(3) 创建 方法 为 P05T 的 Ajax 请 求 ， 把 表单 的 值 发 送 给 submit.html。 

(4) 如 果 请 求 成 功 ， 解 析 响 应 并 在 目标 元 素 中 显示 结果 。 

(5) 如 果 请 求 失败 ， 显 示 错 误 消 息 

submitFormWithAjax E 函数 在 修改 DOM 和 显示 加 载 图 像 之 前 ， 首 先 要 检查 是 否 存在 有 效 的 
XMLHttpRequest 对 象 。 


function submitFormwithAjax( whichform, thetarget ) { 
var request = getHTTPObject(); 


if (!request) { return false; } 
displayAjaxLoading(thetarget); 


然后 , 创建 一 个 URL 编码 的 表单 数据 字符 串 ， 以 便 通 过 POST 请 求 发 送 到 服务 器 。 这 个 URL 
字符 串 的 格式 与 URL 参数 相同 : 

name=valye&name2=value28&name3=Valye3 

表单 中 每 个 字段 的 值 都 会 被 编码 为 这 种 数据 字符 串 。 比 如 说 ,如 果 表单 中 包含 消息 “Why does 
2+2=4?”， 字 符 串 就 类 似 如 下 所 示 : 

message=Why does 2+2=4?&name=me&email=me@example.com 

但 是 ， 这 里 面 的 加 号 (+)、 等 于 号 (=) 和 问号 (?) 都 会 带 来 问题 。 
D 等 于 号 的 意思 是 不 是 说 表单 里 有 一 个 字段 名 叫 2， 而 它 的 值 是 4 呢 ? 
D 加 号 是 一 个 编码 后 的 空格 ， 还 是 一 个 普通 的 加 号 ? 
D 问号 表示 它 后 面 是 参数 列表 吗 ? 

为 了 避免 这 些 歧义 ， 可 以 使 用 JavaScript 的 encodeURIComponent 函数 把 这 些 值 编码 成 URL 安 
全 的 字符 串 。 这 个 函数 会 把 有 歧义 的 字符 转换 成 对 应 的 ASCII 编码 : 


message=Why%20does%202%2B2%3D4%3F%26&name=Me&email=me%40example.com 
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接 下 来 ， 就 像 前 面 验证 表单 一 样 ， 循 环 遍历 表单 的 每 个 字段 ， 但 这 次 不 是 验证 ， 而 是 收集 它 
们 的 名 字 和 编码 后 的 值 ， 把 结果 保存 在 一 个 数组 中 : 


Var datapParts = []; 
var element ; 
for (var i=0; icwhichform.elements.length; i++) { 
element = whichform.elements[i]; 
dataparts[i] = element.name + '=' + encodeURIComponent(element.value); 


收集 到 所 有 数据 后 ， 把 数组 中 的 项 用 和 号 (&&) 联结 起 来 : 

var data = dataparts.join('&"'); 

然后 ， 向 原始 表单 的 action 属性 指定 的 处 理 函 数 发 送 POST 请 求 : 

request.open('POST', whichform,.getAttribute("action"), true); 

并 在 请 求 中 添加 application/x-www-form-urlencoded 头 部 : 

request. setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 

这 个 头 部 信息 对 于 POST 请 求 是 必需 的 ， 它 表示 请 求 中 包含 URL 编码 的 表单 。 

现在 ， 请 求 已 经 准备 好 了 。 在 发 送 请 求 之 前 ， 还 需要 创建 处 理 响 应 的 onreadystatechange 事 
件 处 理 程序 。 

服务 器 返回 的 响应 就 是 Submit .html 页 面 。 这 个 页 面 与 站 点 中 其 他 页 面 一 样 ， 也 包含 头 部 区 
域 、 导 航 和 内 容 。 因 为 我 们 是 想 把 结果 加 载 到 已 有 的 页 面 中 ， 所 以 就 不 需要 头 部 区 域 和 导航 了 。 
只 要 从 页 面 中 取得 <article> 元 素 就 足够 了 。 而 完整 的 页 面 放 在 那里 ， 就 是 预备 着 在 Ajax 无 效 的 
情况 下 ， 就 直接 返回 submit.html 页 面 。 

如 果 你 在 使 用 自己 常用 的 服务 器 端 脚 本 语言 编写 响应 ， 那 么 可 以 只 为 Ajax 请 求 输出 必要 的 
标记 。 但 目前 来 讲 ， 只 能 假设 没有 服务 器 端 脚本 ， 因 此 只 能 使 用 Ajax 来 增加 一 点 用 户 体验 。 

为 了 从 响应 中 提取 出 <articie> 元 素 ， 你 得 考虑 使 用 一 种 叫做 正则 表达 式 的 技术 。 简 单 地 说 ， 
正则 表达 式 就 是 一 种 模式 ， 用 来 匹配 字符 串 中 的 不 同 部 分 。 

下 面 就 是 将 会 用 于 提取 <article> 中 内 容 的 正则 表达 式 : 

/xarticle>([\s\S]+)<\/article>/ 

在 JavaScript 中 ， 正 则 表达 式 的 每 个 模式 都 以 一 个 斜 杠 〈/) 开头 和 结尾 。 如 果 模 式 本 身 包 含 
斜 枉 ， 必 须 使 用 反 斜 杠 对 其 转 义 ， 就 像 上 面 模式 中 对 结束 的 </article> 标 签 中 的 斜 杠 转 义 那 样 。 

要 查找 与 正则 表达 式 模式 匹配 的 字符 ， 只 要 输入 想 查找 的 字符 即 可 。 因 为 要 提取 的 内 容 以 
<article> 开 始 以 </article> 结 尾 ， 因 此 就 直接 写 出 来 就 好 。 


0 


注意 正则 表达 式 语法 中 会 用 到 一 些 特殊 字符 ,例如 方 括号 和 坚 线 。 如 果 想 直接 匹配 这 些 字符 ， 
同样 需要 对 它们 进行 转 义 , 就 像 对 和 久 杠 转 义 一 样 。 比 如 说 , 如 果 想 在 模式 中 匹配 星 号 (*)， 
就 需要 写成 举 ， 因 为 * 在 正则 表达 式 中 用 于 表示 重复 。 要 了 解 其 他 特殊 字符 ， 请 参考 
http://en.wikipedia.org/wiki/Regular expresslon 。 


12.5 JavaScript 201 


在 <article> 和 </article> 之 间 ， 是 一 个 捕获 组 ， 用 于 捕获 位 于 开始 和 结束 标签 之 间 的 文本 。 
捕获 组 中 的 方 括号 包含 了 要 匹配 的 字符 。 而 圆 括 号 定义 的 捕获 组 是 为 了 便于 后 面 提取 其 中 匹配 的 
内 容 。 

如 果 你 想 猿 出 两 个 标签 之 间 可 能 包含 的 所 有 字符 ,即使 你 的 模式 写 得 再 长 ,最 终 可 能 还 是 无 
济 于 事 。 为 此 ， 我 们 就 在 方 括号 中 使 用 了 特殊 字符 来 表示 要 查找 的 内 容 。 在 这 个 正则 表达 式 中 ， 
\s 匹配 任意 空白 字符 ， 而 \S 匹配 任意 非 空白 字符 ， 包 括 回 车 符 和 换行 符 。 当 然 ， 除 此 之 外 ， 正 则 
表达 式 中 还 有 很 多 其 他 字符 类 ， 用 于 匹配 数值 、 单 词 、 非 单词 之 类 的 情况 。 

最 后 ， 在 方 括号 后 面 ， 使 用 一 个 加 号 〈+) 表示 前 面 的 模式 重复 一 次 或 多 次 。 星 号 〈*) 表示 
前 面 的 模式 重复 零 或 多 次 。 

简单 地 说 ， 正 则 表达 式 模式 /<article>([\s\S]+)<\Varticle>/ 可 以 理解 为 如 下 : 

D 查找 一 个 字符 串 ， 这 个 字符 串 以 <article> 开 头 ， 后 跟 一 或 多 个 空格 或 非 空格 字符 ， 最 后 
还 有 一 个 </article>; 

D 把 这 个 字符 串 中 的 空格 及 非 空 格 字 符 包 含 在 一 个 捕获 组 中 ， 以 便 后 面 提取 。 

有 了 正则 表达 式 之 后 ， 就 可 以 编写 onreadystatechange 函数 了 : 


request.onreadystatechange = function () { 
if (request.readyState == 4) { 
if (request,status == 200 || request.status == 0) { 
Var matches = request.responseText.match(/<article>([\s\S]+)<\/article>/); 
if (matches.length > 0) { 
thetarget.innerHTML = matches[1]; 
} else { 
thetarget .innerHTML = '<p>00ops, there was an error. Sorry.</p>'; 


} else { 
thetarget.innerHTML = ‘<p>' + request.statusText + '</p>'; 


} 
}; 


与 第 7 章 中 的 Ajax 示例 类 似 ， 这 个 函数 一 开始 也 是 检测 值 为 4 的 readyState 属性 ， 然 后 再 
验证 状态 值 是 不 是 200。 
在 得 到 成 功 的 响应 后 ,就 可 以 通过 JavaScript 的 match 方 法 对 responseText 应 用 正则 表达 式 了 。 
match 方法 以 正则 表达 式 为 参数 ， 返 回 包含 各 种 匹配 结果 的 数组 。 
数组 matches 的 第 一 个 元 素 (索引 为 0) 是 responseText 中 与 整个 模式 匹配 的 部 分 ， 即 包括 
<article> 和 </article> 在 内 的 部 分 。 因 为 模式 中 包含 了 一 个 捕获 组 〈 一 对 圆 括号 ) ， 因 此 matches 
的 第 二 个 元 素 (索引 为 1) 是 responseText 中 与 捕获 组 中 的 模式 匹配 的 部 分 。 在 这 个 例子 中 ， 只 
有 一 个 捕获 组 ， 因 此 matches 中 也 只 包含 两 个 元 素 。 
在 取得 了 捕获 的 内 容 之 后 ， 函 数 把 matches[1] 中 保存 的 内 容 赋值 给 了 目标 元 素 的 innerHTML 
属性 ， 响 应 处 理 到 此 结束 。 
这 样 ，submitFormWithAjax 函数 中 剩 下 的 代码 就 是 发 送 请 求 ， 并 返回 true， 表 示 国 数 已 经 成 
request.send(data); 
return true; 
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完成 后 的 submitFormWithAjax 函数 如 下 所 示 : 


function submitFormwithAjax( whichform, thetarget ) { 
var request = getHTTPObject(); 
if (!request) { return false; } 
displayAjaxLoading(thetarget); 
var dataParts = [|]; 
var element; 
for (var i=0; i<whichform.elements.length; i++) { 
element = whichform.elements[i]; 
dataparts[i] = element.name + '=' + encodeURIComponent(element.value); 


var data = dataparts.join('&'); 
request.open('POST', whichform.getAttribute("action"), true); 
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
request.onreadystatechange = function () { 
if (request.readyState == 4) { 
if (request.status == 200 || request.status == 0) { 
var matches = request.responseText.match(/<article>([\s\S]+)<\/article>/); 
if (matches.length > 0) { 
thetarget.innerHTML = matches[1]; 
} else { 
thetarget,.innerHTML = '<p>00ps, there was an error. Sorry.</p>'; 


} else { 
thetarget.innerHIML = '<p>' + Tequest.statusText + '</p>'; 
} 
}; 
request.send(data); 


return true; 


现在 ， 可 以 利用 submitFormwithAjax 函数 来 执行 拦截 表单 提交 的 任务 了 。 为 此 ， 需 要 修改 
prepareForms 函数 ， 调 用 submitFormwithAjax， 并 给 它 传递 当前 的 form 对 象 和 页 面 中 的 article 元 
素 作为 参数 。 修 改 后 的 函数 应 该 完成 如 下 操作 。 
口 如 果 表 单 没 有 通过 验证 ， 返 回 false， 因为 验证 失败 ， 所 以 不 能 提交 表单 。 
口 如 果 submitFormwithAjax 函数 成 功 发 送 了 Ajax 请 求 并 返回 true， 则 让 submit 事件 处 理 函 
数 返 回 false， 以 便 阻止 浏览 器 重复 提交 表单 。 
口 否则 ， 说 明 submitFormWithAjax 没有 成 功 发 送 Ajax 请 求 ， 因 而 让 submit 事件 处 理 函 数 返 

回 true， 让 表单 像 什 么 都 没有 发 生 一 样 继续 通过 页 面 提 交 。 

以 下 就 是 完成 上 述 三 项 操作 的 prepareForms 函数 : 


function prepareForms() { 
for (var i=0; i<document.forms.length; i++) { 
Var thisform = document.forms[i]; 
TesetFields(thisform); 
thisform.onsubmit = function() { 
if (lvalidateForm(this)) return false; 
var article = document.getElementsByTagName( 'article' )[0]; 
if (submitFormWithAjax(this, article)) return false; 
return true; 
} 
} 
} 
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好 了 , 现在 提交 一 下 表单 试 试 , 你 应 该 看 到 感谢 信息 出 现在 了 同一 个 页 面 上 , 页 面 没 有 刷新 。 
不 信 ， 就 看 一 看 浏览 器 的 地 址 栏 。 在 提交 了 表单 之 后 ， 你 看 到 的 还 是 contact .html ， 而 不 是 
Submit .html。 

联系 页 面 制作 完毕 ， 当 然 整个 网 站 也 随 之 大 功 告 成 了 。 


12.5.7 ”压缩 代码 


虽说 你 的 网 站 已 经 可 以 上 线 了 ,但 别 忘 了 还 有 一 件 重要 的 事情 要 做 : 改进 性 能 ! 此 时 此 刻 ， 
global.js 文件 的 大 小 是 13 KB， 不 算 大 ， 而 通过 压缩 ， 它 还 能 再 “瘦身 ”。 我 们 在 第 5 章 曾 经 讨 
论 过 ， 用 来 压缩 JavaScript 代码 的 工具 不 少 。 在 此 ， 我 们 要 使 用 的 是 谷歌 的 Closure Compiler。 通 
过 它 的 在 线 表 单 ， 只 要 粘贴 JavaScript 进去 ， 就 可 以 得 到 压缩 后 的 结果 。 

在 浏览 器 中 打开 http:/closure-compilerappspot.com/home， 把 global .js 中 的 代码 复制 粘贴 到 
左 侧 文本 区 /ADD YOUR CODE HERE 的 下 面 ， 如 图 12-22 所 示 。 


人 MA 一 
SClosure Compiler Service 


€ 3 CQ dosure-compiler.appspot.com/home OA 
"3 Closure Compiler RESTAPI|Help 


Add a URL 了 Add 
Example http /www example comybgfie S 
Optimization: O Whitespace only @ Simple OO Advanced 
Which optimization is right for my code? 
Formatting: 口 Pretty print OD Print input delimiter 
Compile | Reset Compiled Code Wamings 
Emors POST data 


Original Size- 
Compiled Size: 


// = 一 ClosureCompiler== @ 
// Qcompilation_level SIMPLE_OPTIMIZATIONS 

// Qourput_file_name default.js 

// ==/ClosureCompiler== 


// ADD YOUR CODE HERE 

| 

function addLoadEvent(func) { 
var oldonload = wi 


if (rypeof window.onload != “function’) { 
window.onload = func; 
} else { 
window.onload = functionO { 
oldonload(); 


} 
} 


Ifunction insertAfter(newElement, targetElement) { 
var parent = targetElement.parentNode; 
if (parent.lastChild 一 targetElement) { 
harent.annendChild(newf lemenr)}: 


©2009 Google - Terms of Service - Privacy Policy - Google Home 


图 12-22 


单 击 Compile 按钮 ， 然 后 就 可 以 得 到 编译 后 的 代码 ， 还 有 相关 的 统计 信息 。 以 我 编写 的 
global .js 文件 为 例 ， 得 到 的 结果 如 下 : 
D 原始 大 小 12.43 KB (gzip 压缩 后 3.12 KB) 
D 编译 后 大 小 8.62 KB (gzip 压缩 后 2.36 KB) 
口 比 原始 大 小 减少 了 30.64% (gzip 压缩 版 减少 了 24.22%) 
注意 ， 根 据 所 添加 的 注释 及 其 他 代码 的 多 少 ， 结 果 会 有 所 差异 。 
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在 Scripts 文件 夹 中 新 建 一 个 global.min.js 文件 ， 把 压缩 之 后 的 代码 复制 粘贴 到 该 文件 中 。 
然后 ， 把 所 有 页 面 的 <script> 标 签 中 引用 的 脚本 改 为 这 个 压缩 版 。 


12.6 小 结 


好 了 ，Jay Skrip and the Domsters 乐队 的 网 站 终于 可 以 上 线 了 。 不 客气 地 说 ， 你 为 他 们 设计 
的 这 个 站 点 在 网 络 上 绝对 可 以 风靡 一 时 。 更 重要 的 是 ， 你 把 内 容 都 放 到 了 有 效 的 、 语 义 化 的 
HTMLS 标签 里 面 ， 并 用 外 部 样式 表 实 现 了 整个 外 观 设计 。 最 后 ， 又 利用 JavaScript 和 DOM 为 它 
添加 了 诸多 交互 功能 及 可 用 性 方面 的 增强 。 

而 且 , 即便 你 把 这 些 增强 的 功能 去 掉 一 部 分 , 甚至 全 都 拿 走 , 整个 站 点 照样 可 以 完美 地 运行 。 
DOM 脚本 在 这 里 并 不 是 必需 的 ， 但 有 了 它 ， 光 临 站 点 的 访客 们 会 有 更 好 的 体验 。 想 想 看 ， 这 个 
乐队 居然 是 虚构 的 ， 就 连 我 都 有 点 为 你 愤愤 不 平 啊 ! 

那 接 下 来 还 要 学 习 什 么 ?从 某 种 意义 上 说 ,你 的 学 习 可 以 告 一 段落 了 。 通过 本 书 , 你 不 仅 掌 
握 了 DOM 背后 的 理论 知识 ， 还 把 它 实 际 运用 到 了 构建 完整 的 站 点 上 面 。 利 用 从 本 书 中 学 到 的 各 
种 方法 和 属性 ， 你 还 能 创造 出 更 具 实 用 性 也 更 加 强大 的 功能 。 

但 从 另外 一 个 角度 说 ， 你 的 前 端 开发 之 路 才刚 刚 开 始 。 本 书 只 向 你 展示 了 通过 少数 DOM 方 
法 所 能 实现 的 少数 功能 。 不仅 这 些 方 法 还 有 更 加 广泛 的 用 途 , 而 且 从 未 提 及 的 很 多 其 他 方法 都 有 
待 你 去 探索 呢 。 

基于 DOM 的 脚本 编程 是 一 项 值得 深入 掌握 的 技术 ,希望 本 书 能 让 你 对 JavaScript 和 DOM 产 
生 初 恋 一 般 的 美好 感觉 。 更 希望 你 能 肩负 起 一 位 技术 人 应 有 的 责任 ， 坚 守 DOM 可 用 性 的 阵地 ， 
并 且 能 够 乐 在 其 中 。 在 光怪陆离 的 现实 世界 中 ,你 稍 不 留神 就 会 误 入 歧途 ， 掉 进 一 味 标新立异 的 
泥 穗 里。 有 时 候 ， 只 要 静 下 心 来， 回头 看 一 看 ， 把 视角 放 得 更 开阔 一 些 ， 问 题 就 会 变 得 很 清楚 。 
从 Tim Berners Lee 发 明 万 维 网 (World Wide Web) 至 今 ， 它 的 宏伟 愿景 就 没有 改变 过 : 

Web 的 无 所 不 在 是 它 的 魅力 。 保 证 任何 人 都 能 无 障碍 地 使 用 它 ， 是 一 个 最 基本 的 
原则 。 


Web 中 无 处 不 在 的 超 文本 文档 具有 天 然 的 可 访问 性 。 之 所 以 变 得 让 人 处 处 受 限 , 仅仅 是 由 于 
我 们 没有 作出 正确 的 选择 。 通 过 综合 Web 标准 和 最 佳 实践 ， 让 我 们 一 起 来 保障 Web 的 开放 、 无 
障碍 。 
OD 使 用 有 意义 的 标记 来 构建 页 面 的 结构 ， 
D 把 表现 性 的 信息 都 分 离 到 CSS 样式 表 中 ， 
D 负责 任 地 使 用 不 唐 突 的 JavaScript 来 应 用 行为 增强 ， 同 时 确保 平稳 退化 。 

现在 ， 我 们 正 处 于 Web 发 展 的 十 字 路 口 。 随 着 Ajax 技术 的 普及 和 HTML5 的 出 现 ， 桌 面 软 
件 与 Web 应 用 之 间 的 界限 已 经 越 来 越 不 分 明了 。 在 努力 推动 Web 向 前 发 展 的 同时 ， 还 要 坚守 它 
作为 一 个 无 处 不 在 的 媒体 的 初衷 ， 势 必要 面临 诸多 挑战 ， 战 胜 各 种 困难 。 

接 下 来 的 路 在 何方 ， 这 个 问题 只 能 你 自己 来 回答 。 我 只 能 告诉 你 ， 这 是 一 个 令 Web 设计 师 
激动 不 已 的 时 代 。 


JavaScript 库 


本 书 从 头 到 尾 一 直 都 在 介绍 DOM 的 基础 知识 。 我 们 学 习 了 如 何 使 用 标准 的 DOM 方法 来 完 
成 常见 的 操作 ， 如 何在 脚本 中 最 有 效 地 使 用 这 些 方法 。 也 许 你 已 经 感觉 到 了 ， 有 时 候 自己 的 代码 
会 显得 十 分 宛 长 , 其 中 不 少 还 都 是 重复 的 。 如 果 只 使 用 诸如 document .getElementById 之 类 的 DOM 
方法 ， 时 间 一 长 不 免 让 人 心 生 厌倦 。 实 际 上 ， 很 多 JavaScript 库 提供 的 “魔术 ”函数 ( 像 $) 不 仅 
可 以 当 document getElementById 来 用 ， 还 能 用 来 完成 这 个 方法 做 不 到 的 更 多 事情 。 

所 谓 库 ， 就 是 可 重用 的 代码 包 ， 有 具有 如 下 一 些 优点 。 
D 库 代 码 经 过 了 大 量 用 户 的 测试 和 验证 。 
D 库 能 够 很 容易 地 与 已 有 的 开发 框架 集成 。 
D 库 为 大 多 数 日 常 琐碎 的 DOM 编程 工作 提供 了 方便 、 简 洁 的 方案 , 每 个 函数 都 能 节省 很 多 
行 代码 。 
D 库 很 好 地 解决 了 跨 浏 览 器 的 问题 ， 让 你 更 省 心 。 

库 可 以 把 你 从 开发 工作 中 解脱 出 来 ， 让 你 专注 于 最 重要 的 环节 ， 极 大 地 提升 工作 效率 。 虽 然 
使 用 库 的 好 处 很 多 ， 但 也 不 是 不 存在 问题 。 


D 库 是 别人 而 不 是 你 自己 编写 的 。 你 可 能 不 了 解 它 的 内 部 工作 机 制 ， 因 此 很 难 调试 bug 或 
解决 由 它 所 导致 的 问题 。 

D 要 使 用 库 ， 就 要 把 它 集成 到 脚本 中 。 这 样 就 会 加 重 页 面 加 载 的 负担 ， 挤 占用 户 有 限 的 
带宽 。 

D 混合 使 用 多 个 库 可 能 会 造成 冲突 ， 同 时 也 会 造成 功能 浪费 。 


如 果 你 对 库 只 能 亦 步 亦 趋 而 不 能 超越 , 那 它 也 会 成 为 你 不 思 进 取 的 慢性 毒药 。 在 决定 使 用 库 
之 前 ， 建 议 大 家 先 花 点 时 间 真 正 掌握 本 书 介 绍 的 JavaScript 和 DOM 编程 技术 。 从 第 1 章 开始 ， 
我 们 就 一 直 强 调理 解 工作 机 制 的 重要 性 ， 而 不 要 停留 在 问题 的 表面 上 。 唾 手 可 得 的 库 比比 皆 是 ， 
稍 后 我 们 就 会 接触 一 些 , 但 是 如 果 你 不 能 理解 它们 背后 的 工作 机 制 , 对 你 和 你 的 程序 都 不 能 算是 
什么 好 事 。 如 果 你 对 某 个 库 理 解 不 透 ， 而 这 个 库 又 假设 你 知道 相关 细节 ， 那 你 就 很 可 能 被 一 些 琐 
碎 的 问题 绊 住 脚 。 

在 此 声明 一 下 ， 我 本 人 与 这 些 库 没 有 任何 关系 ， 因 此 不 会 厚 此 薄 彼 。 我 也 不 认为 这 些 库 在 任 
何 情况 下 都 是 最 佳 选 择 ， 也 不 是 说 只 有 这 几 个 库 可 供 选择 。 下 面 所 举 的 例子 ， 都 是 为 了 更 好 地 说 
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明 如 何 利用 库 来 更 简单 地 完成 本 书 前 面 介绍 的 那些 任务 。 
接 下 来 我 们 会 重 温 前 面 涉 及 的 如 下 主题 。 


D 语法 

D 选择 元 素 

D 操作 DOM 元 素 
D 处 理事 件 

D 动画 

口 Ajax 


你 会 看 到 怎么 通过 库 来 完成 这 些 任务 一 一 通常 要 用 的 代码 都 会 更 少 一 些 , 以 及 为 什么 说 使 用 
库 能 让 你 把 精力 更 多 地 放 在 业务 逻辑 而 非 编写 重复 性 的 脚本 上 面 。 


注意 ”对 任何 一 个 任务 来 说 ， 每 个 库 剖 会 提供 多 种 实现 方法 。 我 只 会 从 中 选择 一 两 种 我 认为 最 
佳 或 最 有 效 的 方法 ， 不 可 能 把 每 个 库 完 成 这 些 任 务 的 所 有 可 能 性 都 列举 出 来 。 因 此 ,请 
读者 通过 阅读 这 些 库 的 文档 来 了 解 其 他 的 方法 。 


在 使 用 库 之 前 ,最 重要 的 是 先 搞 清楚 哪个 库 适 合 自己 的 需要 。 下 面 我 们 就 介绍 几 条 选择 库 时 
需要 注意 的 事项 。 


A.1 选择 合适 的 库 
在 选择 库 的 时 候 ， 你 会 发 现 自己 将 面临 上 百 种 选择 。 要 作出 正确 的 选择 ， 建 议 你 考虑 如 下 


问题 。 
口 它 具 备 你 需要 的 所 有 功能 吗 ? 混合 使 用 多 个 库 有 可 能 导致 问题 。 一 些 常 见 的 方法 ， 如 $() 
和 get()， 虽 然 表 面 上 相同 ， 但 功能 却 完全 不 一 样 。 此 外 ， 如 果 同 时 使 用 多 个 库 ， 重复 的 
功能 和 元 余 代 码 也 是 不 可 避免 的 。 
D 它 的 功能 是 否 比 你 想 要 的 还 多 ? 功能 太 少 是 一 个 问题 ， 但 功能 过 多 同样 不 好 。 如 果 库 中 
包含 很 多 你 用 不 到 或 者 不 能 完全 利用 的 功能 ， 最 好 还 是 选择 一 个 功能 少 一 些 的 版 本 ,至 
少 能 加 快 下 载 的 速度 。 开 发 移动 应 用 时 这 一 点 尤其 要 考虑 。 
它 是 模块 化 的 吗 ? 在 解决 文件 大 小 问题 时 ， 功 能 丰富 的 库 通常 使 用 模块 化 的 方法 ， 把 不 
同 功能 分 割 保存 到 不 同 的 文件 中 。 这 样 ， 你 就 可 以 只 加 载 包 含 相应 功能 的 个 别 文件 ， 从 
而 降低 下 载 量 。 多 数 情况 下 ， 候 怕 都 得 事先 加 载 所 有 必需 的 文件 ， 只 有 少数 库 提供 了 动 
态 加 载 机 制 ， 让 你 能 够 按 需 动态 加 载 文件 。 动 态 加 载 文件 时 ， 还 要 事先 考虑 到 请 求 的 次 
数 。 经 验 表 明 ， 一 次 请 求 一 个 大 文件 ， 要 比 多 次 请 求 多 个 小 文件 更 好 。 
它 的 支持 情况 怎么 样 ? 如 果 库 的 背后 没有 活跃 的 开发 人 员 社 区 维护 ， 就 意味 着 bug 没 人 
修改 ， 功 能 无 法 改进 。 从 另 一 方面 说 ， 使 用 和 维护 的 人 多 本 身 也 说 明 它 的 问题 更 少 ， 也 
更 可 靠 。 库 背后 的 社区 不 仅仅 意味 着 修复 和 功能 ， 也 意味 着 在 你 需要 帮助 时 能 够 及 时 得 
到 很 多 人 的 支持 。 


口 
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口 


口 


它 有 文档 吗 ? 没有 文档 ， 会 让 人 无 所 适 从 。 是 这 样 的 ， 也 许 你 会 碰 到 别人 不 知道 什么 时 
候 写 的 几 个 使 用 示例 ， 但 如 果 没 有 官方 的 文档 ， 至 少 说 明 它 的 开发 人 员 不 够 投入 ， 而 库 
本 身 也 不 会 有 什么 大 的 发 展 前 途 。 

它 的 许可 合适 吗 ? 别 以 为 可 以 在 线 查 看 源 代 码 ， 自 己 就 可 以 想 怎么 用 就 怎么 用 了 。 在 决 
定 使 用 一 个 库 之 前 ， 必 须 查证 自己 的 用 途 包含 在 它 的 许可 范围 内 ， 如 果 有 特殊 需求 ， 就 
更 要 事先 确定 了 。 


在 选 定 了 一 个 合适 的 库 并 在 此 基础 上 有 了 新 的 发 明 创 造 之 后 , 别 忘记 回馈 社区 ! 这 些 库 都 是 
开发 人 员 无 私 奉献 的 结晶 ,他 们 牺牲 自己 有 限 的 休息 时 间 ， 束 是 为 了 改进 你 每 天 在 用 的 工具 。 如 


果 你 不 能 帮助 改进 库 的 功能 或 者 修改 bug， 可 以 提供 一 些 使 用 示例 和 教程 啊 ， 就 算 帮 着 写 写 文档 


也 是 功德 无 量 的 。 总 之 ， 只 要 有 心 ， 不 管 做 什么 都 会 促进 库 的 恨 好 发 展 。 


A.1.1 


有 代表 性 的 库 


为 了 撰写 这 个 附录 ,我 根据 前 面 的 标准 选择 了 儿 个 有 代表 性 的 库 , 中 间 也 摊 杂 点 个 人 的 喜好 。 
直 说 吧 ， 后 面 的 大 多 数 示例 都 是 使 用 jQuery 编写 的 ， 少 数 使 用 的 是 具有 类 似 功 能 的 其 他 库 。 这 
些 库 各 有 长 短 ， 简 述 如 下 。 

D jQuery (http:/jquery.com) 官方 网 站 说 它 是 “一 个 快速 简洁 的 JavaScript 库 ， 致 力 于 简化 


口 


口 


口 


HTML 文档 搜索 、 事 件 处 理 、 动 画 以 及 Ajax 交互 ， 从 而 实现 快速 Web 开发 。jQuery 的 设 
计 目 的 是 为 了 改变 你 编写 JavaScript 程序 的 方式 。” jQuery 极为 强大 的 选择 方法 、 连 级 语 
法 以 及 简化 的 Ajax 和 事件 方法 ， 都 会 让 你 的 代码 变 得 简洁 且 容 易 理 解 。 这 个 库 的 背后 还 
有 一 个 非常 大 的 社区 ， 包 括 大 量 插件 开发 人 员 ， 他 们 开发 的 插件 极 大 增加 了 库 的 功能 。 
Prototype (http://prototypejs.org) 把 自己 描绘 成 “一 个 旨 在 简化 动态 Web 应 用 开发 的 
JavaScript 框架 。”Prototype 提供 了 很 多 非常 棒 的 DOM 操作 功能 ， 还 有 一 个 广 受 好 评 的 
Ajax 对 象 。 它 是 出 名 最 早 的 一 个 JavaScript 库 ， 也 是 通过 $() 实 现 选 择 功 能 的 鼻祖 。 

The Yahoo! User Interface (YUI) Library (http://developer.yahoo.com/yui) 的 定位 是 “一 套 
用 JavaScript 编写 的 实用 函数 和 控件 ， 可 用 来 基于 DOM、DHTML 以 及 AJAX 构建 高 交 
互 性 的 Web 应 用 。YUI 还 包含 了 一 些 核心 的 CSS 资源 。”YUI 的 开发 人 员 社 区 是 很 值得 
称道 的 ， 它 的 文档 也 可 圈 可 点 。 这 个 库 涵 盖 的 功能 非常 广泛 ， 从 简单 的 DOM 操作 到 高 级 
的 效果 ， 以 及 全 功能 的 应 用 程序 部 件 ， 只 要 你 能 想到 的 ， 它 都 有 。 由 于 功能 全 面 ，YUI 
被 按照 拿 名 空间 切割 成 很 多 独立 的 小 文件 ， 也 正 因为 如 此 ， 有 些 使 用 者 有 时 候 会 搞 不 清 
自己 到 底 需 要 哪个 文件 ， 到 哪里 去 找到 该 文件 。 光 API 列表 就 长 达 20 页 ， 这 个 库 的 规模 
就 不 难 想象 了 。 

Dojo Toolkit (http://www.dojotoolkit.org/) 说 它 能 “ 帮 你 节省 时 间 ， 性 能 优异 ， 可 以 让 开 
发 过 程 收 放 自如 。 它 是 经 验 丰富 的 开发 人 员 为 构建 伟大 的 Web 体验 而 提供 给 你 的 工具 
包 。”Dojo 确实 是 一 个 功能 丰富 的 JavaScript 开 发 工具 包 , 很 多 国际 知名 的 大 公司 都 在 用 。 
它 的 开发 人 员 社 区 也 很 庞大 ， 文 档 做 得 也 非常 好 ， 市 面 上 有 不 少 关于 它 的 书 。 
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口 MooTools (http://mootools.net/) 说 自己 是 “一 个 小 巧 、 模 块 化 、 面 向 对 象 的 JavaScript 框 
架 ， 适合 中 高 级 JavaScript 开 发 人 员 。 利 用 它 精 巧 、 文 档 完备 且 前 后 一 致 的 API， 可 以 编 
写 出 强大 、 灵 活 而 又 能 够 跨 浏览 器 的 代码 。”MooTools 的 文档 写 得 非常 好 ,用户 社区 也 有 
相当 规模 。 这 个 库 不 仅 包 含 一 些 非 常 好 用 的 DOM 增强 API， 它 的 Moo.fx 效果 库 更 是 令 
人 叫绝 ， 能 够 实现 各 式 各 样 的 或 简单 或 复杂 的 网 页 动画 。 


注意 Prototype 和 jQuery 还 有 其 他 库 ， 部 使 用 $() 作 为 函数 语法 。 如 果 你 打算 在 自己 的 开发 环境 
中 使 用 其 中 一 个 库 ， 请 务必 先 阅读 相应 库 的 文档 ， 看 看 文档 描述 与 本 书 介绍 有 哪些 出 入 ， 
或 者 说 该 库 在 什么 情况 下 会 与 其 他 库 发 生 冲 突 。 


A.1.2 ”内容 分 发 网 络 


一 定 要 尽 可 能 想 办 法 减少 网 页 文档 的 大 小 ， 并 让 浏览 器 缓存 文件 。 除 此 之 外 ， 当 然 还 要 让 用 
户 尽 可 能 快 地 加 载 到 页 面 。 对 于 库 来 说 ,如果 有 很 多 站 点 要 使 用 同一 个 库 ， 那么 最 好 是 把 这 个 库 
托管 到 一 个 公共 服务 器 上 , 以便 所 有 站 点 共享 和 访问 。 这样 ， 当 用 户 从 一 个 站 点 跳 到 另 一 个 站 点 
时 ， 他 们 就 不 用 再 重复 下 载 相同 的 文件 了 。 

内 容 分 发 网 络 (CDN，Content Delivery Network) 可 以 解决 分 布 共 享 库 的 问题 。CDN 就 是 一 
个 由 服务 器 构成 的 网 络 ， 这 个 网 络 的 用 途 就 是 分 散 存储 一 些 公共 的 内 容 。CDN 中 的 每 台 服 务 器 
都 包含 库 的 一 份 复 本 , 这 些 服务 器 分 布 在 世界 上 不 同 的 国家 和 地 区 , 以 便 达到 利用 带宽 和 加 快 下 
载 的 目的 。 浏 览 器 访问 库 的 时 候 使 用 一 个 公共 的 URL， 而 CDN 的 底层 则 通过 地 理 位 置 最 近 、 速 
度 最 快 的 服务 器 提供 相应 的 文件 ， 从 而 解决 了 整个 系统 中 的 瓶颈 问题 。 

Google 为 以 下 这 些 库 提供 了 免费 的 CDN 服务 : 
口 Dojo 
D jQuery 
口 MooTools 
口 Prototype 
DO Yahool User Interface Library (YUD) 

要 了 解 Google CDN 托 管 的 这 些 库 的 最 新 版 以 及 其 他 特殊 信息 ,请 访问 http:/code.google.comy/ 
apis/libraries/devguide.html。 

使 用 CDN 中 托管 的 库 与 使 用 其 他 JavaScript 文 件 一 样 。 例 如 ， 以 编写 本 书 时 的 URL 为 例 ， 
Google CDN 中 jQuery 库 的 URL 是 https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js， 
因而 在 文档 中 就 可 以 添加 如 下 <script> 标 签 : 


«script src="https://ajax.googleapis.com/ajax/libs/jquery/ 
ww 1.4.3/jquery.min.js"></script> 


如 果 你 觉得 仅仅 依赖 Google 或 其 他 CDN 不 保险 ， 可 以 再 提供 一 个 后 备 <script> 标 签 ， 以 便 
在 CDN 不 可 用 时 从 本 地 服务 器 下 载 相应 文件 。 方 法 很 简单 ， 无 非 就 是 先 检 测 一 下 相应 对 象 是 否 
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存在 ， 如 果 不 存 在 就 添加 加 载 本 地 文件 的 <script> 标 签 : 


<script src="https://ajax.googleapis.com/ajax/libs/jquery/ 

ww 1.4.3/jquery.min.js ></script> 

<script>!window.jQuery && document.write(unescape('%3C 

ww script src="scripts/jquery-1.4.3.min.js"%3E%3C/script%3E' ))</script> 


注意 这 个 方法 使 用 document .write 在 jQuery 库 没 有 创建 全 局 window. jQuery 对 象 的 情况 下 添加 
一 个 <script> 标 签 。 本 附录 中 使 用 的 $ 池 数 ， 其 实 就 是 对 专 有 的 jQuery 对 象 的 简写 别名 。 
有 了 后 备 代码 后 ， 即 便 CDN 的 服务 器 出 了 问题 ， 也 不 会 连累 你 的 网 站 了 。 
A.2 语法 
在 展示 具体 的 示例 之 前 ， 应 该 先 介绍 一 些 很 多 库 都 采用 的 语法 。 
注意 jQuery、Prototype、MooTools 及 其 他 很 多 库 ， 都 把 $() 也 数 作为 其 选择 器 方法 的 简写 。 
此 ， 在 本 附录 中 使 用 $() 会 让 示例 代码 更 通用 一 些 。 不 过 ， 也 要 注意 ， 虽 然 调 用 这 个 函数 


的 语法 形式 相似 ， 但 不 同 的 库 在 底层 创建 的 对 象 则 过 然 不 同 。 要 了 解 具 体 的 $ 函 数 的 工作 
原理 ， 请 查看 相应 库 的 文档 。 


多 数 库 都 支持 以 点 将 方法 连 级 起 来 的 语法 , 也 就 是 通过 点 操作 符 把 多 个 方法 调用 连接 成 一 行 
代码 ， 就 像 我 们 前 面 针 对 getElementById 用 过 的 一 样 : 

document .getElementById('example' ).nodeName; 

在 jQuery 之 类 的 库 中 ， 方 法 连 级 是 一 种 特色 ， 这 些 库 特意 设计 了 相应 的 方法 ， 以 便 通 过 连 
级 的 形式 将 复杂 的 脚本 连 级 成 简短 的 代码 。 使 用 这 些 库 时 ,一 行 脚 本 完成 多 项 操作 是 司空 见 惯 的 。 
举 个 例子 ， 使 用 jQuery 先 删除 文档 中 所 有 段落 的 一 个 类 名 ， 然 后 再 为 它们 添加 另 一 个 类 名 ， 可 
以 这 样 来 写 : 

$('p').removeClass('classFoo' ).addClass('classBar' ); 

与 第 9 章 的 那个 添加 类 名 的 函数 相 比 ,这 行 代码 可 是 清晰 多 了 , 稍 后 我 们 还 会 介绍 有 关 $('p') 
选择 器 的 更 多 信息 。 

另 一 个 语法 是 迭代 。 不 少 库 都 提供 了 方便 对 元 素 列 表 进 行 操作 的 循环 结构 , 而 连 缀 语法 则 为 
此 提供 了 一 种 一 目 了 然 的 方式 。 

仍 以 jQuery 为 例 ， 对 于 下 面 这 个 第 3 章 示例 中 的 循环 : 

var items = document.getElementsByTagName("1i"); 


for (var i=0; i < items.length; i++) { 
alert(typeof items[i]); 


} 
使 用 jQuery 的 each 方法 可 以 写成 : 
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$('1i').each(function(i){ 
alert( typeof this ); 
})); 


jQuery 的 each 方法 以 及 其 他 循环 方法 ， 会 基于 列表 中 的 每 个 元 素来 执行 一 个 回调 函数 。 这 
个 回调 函数 只 接收 元 素 在 列表 中 的 索引 作为 参数 , 并 在 当前 市 点 的 上 下 文中 执行 , 因此 这 个 例子 
中 的 this 引用 的 就 是 每 个 1i 元 素 自身 。 

了 解 库 的 基本 语法 之 后 ， 下 面 就 来 看 一 看 选择 元 素 。 


A.3 选择 元 素 


到 目前 为 止 ， 你 已 经 知道 怎么 使 用 内 置 的 DOM 方法 getElementById、getElementsByTagName 
以 及 getElementsByClassName， 来 分 别 通过 也、 标签 和 类 名 来 选择 元 素 了 。 

能 通过 ID 选择 元 素 很 方便 ， 但 如 果 能 使 用 各 种 CSS 选择 器 来 选择 元 素 不 是 更 好 吗 ? 很 多 库 
都 和 jQuery 一样 ， 提 供 了 类 似 其 $ 函 数 的 高 级 选择 器 方法 。 使 用 这 些 方法 ， 可 以 基于 以 下 要 素 进 
行 选择 : 
口 带 # 的 ID， 如 $('#elementid') 
口 带 .的 类 名 ， 如 $(' .element-class') 
D 标签 名 ， 如 $('tag') 

当然 ， 这 些 选择 元 素 的 途径 还 算 不 上 十 分 特别 ， 但 关键 是 还 可 以 使 用 各 种 CSS 选择 器 
(http://www.w3.org/TR/css3-selectors/#selectors) 来 选择 特定 的 元 素 。 


注意 ”在 $ 孙 数 中 通过 ID 选择 器 如 lementid 选 择 元 素 时 ,该 函数 仍然 返回 对 象 列表 ,只 不 过 返回 
的 列表 中 只 包含 一 个 元 素 。 这 样 , 你 可 以 使 用 连 级 语法 继续 调用 each 及 其 他 jQuery 方法。 


A.3.1 CSS 选择 器 


除了 使 用 D、 类 名 和 标签 以 外 ， 在 多 数 库 中 都 可 以 使 用 下 列 高 级 的 选择 器 : 
('*') 选 择 所 有 元 素 ，; 
('tag') 选 择 所 有 HTML 标签 中 的 tag 元 素 ，; 
('tagA tagB') 选 择 作为 tagA 后 代 的 所 有 tagB 元 素 ; 
('tagA,tagB,tagC' ) 选 择 所 有 tagA 元 素 、ta9g8 元 素 和 tagC 元 素 ; 
("大 d') 和 $('tag#id' ) 选 择 所 有 也 为 id 的 元 素 或 卫 为 id 且 标签 为 tag 的 元 素 ; 
('.className' ) 和 $('tag.className') 选 择 所 有 类 名 为 className 的 元 素 或 类 名 为 className 
标签 为 tag 的 元 素 。 
也 可 以 使 用 组 合 选择 器 $(' 加 yList 1i') 或 $('ul 1i a.selectMe') 以 空格 来 分 隔 选 择 更 具体 的 后 
代 元 素 。 
jQuery 还 支持 下 列 CSS 2.1 属性 选择 器 : 


DOOO DO 0 
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DO DO Oo 
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还 可 以 使 
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3 


ttr 
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的 tag 元 素 ; 


tag[attr 


tagA +t 


b> 


‘tag:nth-1 
‘tagi:nt 


= We 


二 
O 〇 ) 
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g:last 


‘tag:only 
‘tag:only 
pty') 选 择 所 有 没有 子 元 素 的 tag 元 素 ; 


C 
O) 
人 | 
0 


‘tag:enab 
‘tag:disa 
‘tag:chec 


g:not( 


] ) 选 择 所 有 带 有 attr 属性 的 tag 元素 ，; 


ttr=value] ) 选 择 所 有 attr 属性 值 恰好 等 于 value 的 tag 元 素 ; 


*=Value]') 选 择 所 有 attr 属性 值 中 包含 字符 串 value 的 tag 元 素 ; 


ttr~=value] ) 选 择 所 有 attr 属 性 值 为 空格 分 隔 的 多 个 字符 串 且 其 中 一 个 字符 串 等 


tag 元 素 ; 
^value] ) 选 择 所 有 attr 属性 值 以 value 开头 的 tag 元 素 ; 
$=value] ) 选 择 所 有 attr 属性 值 以 value 结尾 的 tag 元 素 ; 
|=value]') 选 择 所 有 attr 属性 值 为 连 字符 分 隔 的 字符 串 且 该 字符 串 以 value 开 


!=value] ) 选 择 所 有 attr 属性 值 不 等 于 value 的 tag 元 素 。 


还 可 以 使 用 子 选 择 器 或 同辈 选择 器 : 
(tagA > 
0 

(tagA ~ tagB' ) 选 择 作为 tagA 同辈 元 素 且 位 于 其 后 的 所 有 tagB 元 素 。 
用 一 些 伪 类 和 伪 元 素 选 择 器 : 

‘tag:root 
‘tag:nth- 


agB' ) 选 择 作为 tagA 元 素 子 元 素 的 所 有 tagB 元 素 ; 
agB' ) 选 择 紧 邻 tagA 元 素 且 位 于 其 后 的 tagB 元 素 ; 


') 选 择 作为 文档 根 元 素 的 tag 元 素 ; 
child(n) ') 选 择 作为 其 父 元 素 正 数 第 n 个子 元 素 的 所 有 tag 元 素 ; 
ast-child(n)') 选 择 作为 其 父 元 素 倒数 第 n 个子 元 素 的 所 有 tag 元 素 ; 


-of-type(n) ) 选 择 几 个 同辈 tag 元 素 中 的 正 数 第 n 个 ， 
‘tag:nth-i 
‘tag:firs 
‘tag: last 


( 
( 
( 
( 
( 
( 
( 
('tag:firs 
0 
( 
( 
( 
( 
( 
( 
( 


ast-of-type(n) ) 选 择 几 个 同辈 tag 元 素 中 的 倒数 第 n 个 ; 
-chi1d ) 选 择 作为 其 父 元 素 第 一 个 子 元 素 的 tag 元 素 ; 
-Child' ) 选 择 作为 其 父 元 素 最 后 一 个 子 元 素 的 tag 元 素 ; 
tL-of -type' ) 选 择 几 个 同辈 tag 元 素 中 的 第 一 个 

-of-type ) 选 择 几 个 同辈 tag 元 素 中 的 最 后 一 个 ; 

-cnild ) 选 择 作为 其 父 元 素 唯一 子 元 素 的 tag 元 素 ; 
-of-type ') 选 择 同 辈 元 素 中 唯一 一 个 标签 为 tag 的 元 素 ; 


1ed ) 选 择 界 面 元 素 中 所 有 已 经 启用 的 tag 元 素 ; 

bled ) 选 择 界面 元 素 中 所 有 已 经 禁用 的 tag 元 素 ; 

ked ) 选 择 界面 元 素 中 所 有 已 经 被 选中 的 tag 元 素 〈 如 复 选 框 和 单 选 按钮 ); 
S) ) 选 择 与 选择 器 s 不 匹配 的 所 有 tag 元 素 。 


不 同 的 库 对 上 述 选 择 器 的 支持 情况 各 不 相同 ， 请 查阅 相应 库 的 文档 以 了 解 具体 的 情况 。 

利用 这 些 选 择 器 ， 就 可 以 基于 它们 在 文档 中 的 位 置 而 不 必 通 过 类 名 或 ID 而 迅速 找到 任意 一 
个 特定 的 元 素 。 而 且 ， 你 的 脚本 不 仅 因此 可 以 不 再 依赖 于 特定 的 也 或 类 名 ， 还 能 减少 选择 元 素 
所 需 的 代码 。 比 如 说 ， 要 选择 文章 中 nav 元 素 包含 的 所 有 链接 ， 可 以 使 用 DOM 方法 通过 下 列 代 
码 实 现 : 
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var links = [] 
var articles = document.getElementsByTagName("article"); 
for (var a = 0; a < articles.length; a++ ) { 
var navs = atticles[a].getElementsByTagName( "nav" ); 
for (var Nn = 0; Nn < navs.length; nt+ ) { 
var links = nav[n].getElementsByTagName("a"); 
for (var 1 = 0; 1 < links.length; l++ ) { 
links[links.length] = links[1]; 


} 
本 
// 对 链接 执行 相应 操作 


但 利用 选择 器 语法 ， 则 可 以 缩短 为 很 少 的 字符 : 


var links = $( "article nav a'); 


// 对 链接 执行 相应 操作 
这 样 ， 代 码 不 仅 清 晰 了 很 多 ， 而 且 也 很 容易 看 懂 。 


A.3.2 ” 库 所 提供 的 专 有 选择 器 


有 些 库 还 提供 了 专 有 的 选择 器 ， 例 如 jQuery 支持 $( tag:even ) 和 3$( tag:odd ) 选 择 器 ， 用 于 
选择 偶数 和 奇数 元 素 。 第 12 章 有 一 个 为 表格 行 添加 条 纹样 式 的 函数 ， 


function stripeTables() { 

if (!document.getElementsByTagName) return false; 
var tables = document.getElementsByTagName("table"); 
for (var i=0; ixtables.length; i++) { 

var odd = false; 

var rows = tables[i].getElementsByTagName("tr"); 

for (var j=0; j<rows.length; j++) { 

if (odd == true) { 
addClass(rows[j],"o0dd"); 


odd = false; 
} else { 
odd = true; 
} 
} 


} 


而 用 一 行 jQuery 代码 ， 就 可 以 轻松 地 选择 所 有 奇数 表格 行 并 为 它们 应 用 CSS 属性 : 
$("tr:odd").addClass("odd"); 

怎么 样 ， 是 不 是 简单 明了 ? 

jQuery 还 支持 其 他 专 有 选择 器 

('tag:even') 选 择 丐 配 元 素 集中 个 数 序 字号 的 元 素 一 一 特别 适合 突出 显示 表格 行 ! 
('tag:0dd') 选 择 匹 配 元 素 集 中 奇数 序号 的 元 素 ，; 
('tag:eq(0)') 和 $('tag:nth(0)') 选 择 匹 配 元 素 集 中 的 第 一 个 元 素 ， 如 页 面 中 第 一 个 段落 ， 
('tag:gt(n) ) 选 择 匹 配 元 素 集中 索引 值 大 于 mn 的 所 有 元 素 ; 

(tag:1t(n) ) 选 择 匹 配 元 素 集中 索引 值 小 于 mn 的 所 有 元 素 ; 

('tag:first' ) 等 价 于 :eq(0)， 


于 人 
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) 
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tag:1ast ) 选 择 匹配 元 素 集中 的 最 后 一 个 元 素 ; 

tag:parent ') 选 择 匹配 元 素 集 中 包含 子 元 素 (文本 市 点 也 算 ) 的 所 有 元 素 ; 

'tag:contains('test')') 选 择 匹 配 元 素 集 中 包含 指定 文本 的 所 有 元 素 ; 

'tag:visible' ) 选 择 匹 配 元 素 集 中 所 有 可 见 的 元 素 (包括 display 属性 为 block 和 inline、 

visibility 属性 为 visible 以 及 type 属性 不 是 hidden 的 表单 元 素 ) ; 

口 $('tag:hidden') 选 择 匹 配 元 素 集 中 所 有 隐藏 的 元 素 (包括 display 属性 为 none、 visibility 
属性 为 hidden 以 及 type 属性 为 hidden 的 表单 元 素 )。 

使 用 这 些 选 择 器 可 以 快速 地 修改 元 素 ， 比 如 要 修改 页 面 中 第 一 个 段落 的 字体 粗细 |: 

$("p:first").css("font-weight", "bold"); 

或 者 用 一 行 代码 来 显示 所 有 隐藏 的 <div> 元 素 : 

$("div:hidden").show(); 

甚至 就 连 要 隐藏 所 有 包含 单词 “scared” 的 div 元 素 都 易如反掌 : 

$("div:contains('scared')").hide(); 

最 后 ，jQuery 还 提供 了 一 些 专门 为 表单 设计 的 表达 式 ， 用 于 快速 访问 表单 元 素 : 

D :input 选择 表单 中 的 所 有 元 素 (input、select、textarea、button); 

D :text 选择 所 有 文本 字段 (type="text")， 

口 :password 选择 所 有 密码 字段 (type="password")， 

D :radio 选择 所 有 单 选 按钮 (type="radio")， 

口 :checkbox 选择 所 有 复 选 框 (type="checkbox")， 

口 

口 

口 

口 


( 
( 
( 
( 


DO DO oOo 


: Submit 选择 所 有 提交 按钮 (type= submit ") ; 
:image 选择 所 有 表单 图 像 (type="image")， 
:reset 选择 所 有 重 置 按钮 (type="reset")， 
:button 选择 所 有 其 他 按钮 (type="button")。 


A.3.3 使 用 回调 函数 筛选 


在 高 级 表达 式 还 不 能 满足 你 的 需要 , 或 者 某 个 库 不 支持 某 个 表达 式 的 情况 下 ,还 可 以 使 用 回 
调 函 数 来 选择 DOM 元 素 ， 也 就 是 基于 每 个 元 素 执 行 相应 的 筛选 代码 。 在 接 下 来 的 所 有 示例 中 ， 
回调 函数 返回 true 则 意味 着 相应 的 元 素 会 出 现在 结果 集中 , 返回 false 则 意味 着 相应 元 素 不 会 出 
现在 结果 集中 。 

如 果 你 想 创建 一 个 反 向 选择 器 ， 那 么 使 用 回调 函数 会 非常 方便 。 所 有 CSS 选择 器 选择 的 都 
是 表达 式 最 右 端的 元 素 , 因此 就 没有 办 法 通过 它们 选择 “只 包含 一 个 图 像 子 元 素 的 所 有 锚 标 签 ”。 
但 使 用 回调 函数 则 可 轻松 实现 这 个 选择 。 假 设 有 以 下 HTML: 


«<a name="example1"><img src="example.gif" alt="example"/></a> 
</1i> 
<1i> 
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<a name="example2">No Images HeTe</a> 
</]i> 
《1i> 
<a name="example3"> 
Two here! 
<img src="example2.gif" alt="example"/> 
<img src="example3.gif" alt="example"/> 


使 用 YUI 的 YAHO0.uti1.Dom.getElementsBy 方 法 ,基于 本 书 前 面 介 绍 的 DOM 元 素 属性 ， 即 可 
筛选 出 想 要 的 元 素 : 
var singleImageAnchors = YAHOO.util.Dom. getElementsBy( function(e) { 
// 查找 只 包含 一 个 图 像 子 元 素 的 <a> 节点 
return (e.nodeName == 'A' && e, Bet ELE By oNanel img').length == 1); 


此 时 变量 singleImageAnchors 会 包含 一 个 列表 ， 列 表 中 只 有 一 个 元 素 ， 因 为 示例 代码 中 只 有 
一 个 仅 包含 一 个 图 像 子 元 素 的 锚 ， 因 此 该 元 素 引 用 的 就 是 <a name="examplel">。 

Prototype 和 jQuery 为 此 分 别提 供 了 findAll 和 filter 方法 。 在 连 组 调用 方法 的 时 候 , 使 用 这 
两 个 方法 就 可 以 筛选 出 表达 式 返 回 的 元 素来 。 

首先 来 看 一 下 Prototype 的 代码 (使 用 $$ 选择 器 ): 

// Prototype 库 的 回调 筛选 函数 

var singleImageAnchors = $$('a').findAll(function(e) { 

return (e.descendants().findAll(function(e) { 


return (e.nodeName == 'IMG'); 
}).length == 1); 


再 看 一 下 jQuery 的 代码 : 

// jQuery 库 的 回调 筛选 函数 

var singleImageAnchors = $('a').filter(function() { 
return ($('img',this).length == 1) 


Prototype 和 jQuery 的 表达 式 选择 器 应 该 足以 应 付 大 多 数 的 情况 。 万 一 你 还 需要 对 元 素 进行 
更 深入 的 分 析 ， 那 么 回调 函数 还 可 更 复杂 一 些 。 


A.4 操作 DOM 元 素 


每 个 库 都 提供 了 非常 多 的 DOM 操作 方法 ， 毕 竞 操 作 DOM 的 能 力 可 以 体现 一 个 库 的 水 平 。 
这 里 我 们 只 简单 列举 其 中 几 个 ， 剩 下 的 还 是 请 读者 自己 去 查阅 相关 库 的 文档 。 


A.4.1 生成 内 容 


用 jQuery 创建 新 的 DOM 元 素 很 简单 。 把 HTML 代码 作为 $ 国 数 的 参数 传 入 ， 即 可 创建 新 的 
点 。 下 面 这 行 代 码 就 可 以 给 文档 的 body 元 素 添 加 一 个 新 的 div 元素。 新 的 div 元 素 会 有 一 个 值 
为 example 的 id， 并 且 包 含 “Hello ”。 
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$('<div id="example">Helloc/div>').appendTo(document .body); 
或 者 ， 也 可 以 试 一 试 jQuery 的 模板 插件 (http:/api.jquery.comy/category/plugins/templates ) 。 


注意 可 以 使 用 Microsoft CDN 中 托管 的 这 个 模板 插件 。 在 编写 本 书 时 的 URL 为 http://ajax. 
microsoft.com/ajax/jquery.templates/betal/jquery.tmpl.min.js。 


使 用 jQuery 模板 插件 可 以 在 HTML 字符 串 中 声明 一 些 特殊 的 变量 ， 如 ${term} ， 这 些 变量 随 
后 可 以 被 奉 换 成 一 组 数组 或 其 他 模板 。 
举 个 例子 ， 以 下 是 第 8 章 的 displayAbbreviations 函数 : 


function displayAbbreviations() { 
if (ldocument.getElementsByTagName || ldocument.createElement 
w || !document ,createTextNode) return false; 
var abbreviations = document.getElementsByTagName("abbr"); 
if (abbreviations.length < 1) return false; 
var defs = new Array(); 
for (var i=0; icabbreviations.length; i++) { 
Var current abbr = abbreviations[i]; 
var definition = current abbr.getAttribute("title"); 
Var key = current abbr.1astChild.nodeValue; 
defs[key] = definition; 


var dlist = document.createElement("d1l"); 
for (key in defs) { 
var definition = defs[key]; 
var dtitle = document.createElement("dt"); 
var dtitle text = document.createTextNode(key); 
dtitle.appendChild(dtitle text); 
var ddesc = document.createElement("dd"); 
var ddesc text = document.createTextNode(definition); 
ddesc.appendChild(ddesc text); 
dlist.appendChild(dtitle); 
dlist.appendChild(ddesc); 
} 
var header = document.createElement("h2"); 
Var header text = document.createTextNode("Abbreviations"); 
header.appendChild(header text); 
document.body.appendChild(header); 
document .pody.appendChildkdlist); 
} 


如 采 使 用 jQuery 及 jQuery 模板 插件 ， 可 以 如 下 重 写 ， 


function displayAbbreviations() { 
// 创建 缩写 词 数组 
var data = $('abbr').map(function(){ 
return { 
desc:$(this).attr('title' ), 
term: $(this).text() 


2 
}) .toArray(); 
// 添加 到 文档 并 应 用 模板 
$('<h2>Abbreviations</h2>' ).appendTo(document.body).after( 
$.tmpl( "<dt>${term}</dt><dd>${desc}</dd>", data ) 
.wrapAll("<dl/>") 


2 
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更 进一步 , 还 可 以 把 模板 从 函数 中 分 离 出 来 ,根据 每 一 页 的 具体 情况 来 定义 缩写 词 模板 。 模 
板 插 件 的 文档 (http://apijquery.com/tmpl) 中 详细 介绍 了 利用 <script> 元 素 的 更 高 级 模板 功能 ， 请 
读者 自行 参考 。 


A.4.2 操作 内 容 


如 果 想 对 现 有 文档 执行 某 些 操作 ， 或 者 移动 某 些 元 素 的 位 置 ， 可 以 使 用 jQuery 的 appendTo 
或 insertAfter 等 方法 。 通 过 这 些 方法 ， 可 以 找到 一 组 元 素 ， 并 把 它们 全 都 变 成 另 一 个 元 素 的 子 
元 素 。 

例如 ， 可 以 把 一 个 列表 中 的 所 有 元 素 全 部 转移 到 另 一 个 列表 中 : 

$('ul#list1 1i').appendTo("ul#1list2"); 

之 所 以 可 以 实现 这 种 操作 , 原因 在 于 每 个 元 素 在 文档 中 都 只 有 一 个 引用 。 你 让 它 成 为 另 一 个 
元 素 的 子 元 素 ， 也 就 意味 着 它 必 须 与 原来 的 父 元 素 解除 “父子 关系 "。 假 如 你 想 的 是 复制 这 些 元 
素 ， 那 么 可 以 使 用 jQuery 的 clone 方 法: 

$('ul#list1 1i').clone().appendTo("ul#list2"); 

DOM 操作 在 任何 一 个 库 中 都 受到 了 极 大 的 重视 ， 它 们 分 别 都 提供 了 一 些 用 于 删除 、 插 入 、 
添加 、 前 置 等 操作 的 快捷 方法 。 


A.5 处 理事 件 


综观 全 书 , 不 难 发 现 事件 其 实 是 用 户 交 互 的 根本 所 在 。 没 有 事件 , 也 就 没有 办 法 与 页 面 交 互 。 

通过 前 面 的 学 习 ， 相 信 你 已 经 掌握 了 一 些 基 本 的 事件 方法 。 说 到 使 用 库 ， 当 然 很 多 也 都 内 置 
了 相应 的 事件 管理 功能 。 而 且 ， 这 些 库 还 包含 了 浏览 器 没有 原生 实现 或 者 说 W3C 事件 模块 中 没 
有 定义 的 自 定义 事件 的 注册 及 调用 机 制 。 


A.5.1 加载 事 件 


前 面 介 绍 过 一 个 为 页 面 加 载 事 件 注 册 处 理 方法 的 函数 ， 即 addLoadEvent: 


function addLoadEvent(func) { 
var oldonload = window.onload; 
if (typeof window.onload != 'function’) { 
window.onload = func; 
} else { 
window.onload = function() { 
oldonload(); 
func(); 


} 
} 


利用 这 个 函数 可 以 在 页 面 加 载 的 时 候 执 行 其 他 函数 : 


function myFucntion() { 
// 在 页 面 加 载 后 执行 一 些 操作 


addLoadEvent(myFunction); 
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以 上 代码 也 可 以 写成 : 


addLoadEvent(function() { 
a 


不 同 的 库 也 都 提供 了 类 似 的 方法 ， 只 不 过 在 实现 方式 上 会 有 所 不 同 。 比 如 说 ,jQuery 就 利用 
连 级 语法 基于 每 种 事件 类 型 都 提供 了 相应 的 事件 方法 (http://apijquery.com/category/events)。 
以 addLoadEvent 为 例 ，jQuery 的 ready 方法 以 类 似 的 方式 实现 了 相应 的 机 制 : 


$(document).ready(handler); 
$(handler); 


第 二 个 方法 假定 document 对 象 是 ready 方法 的 目标 。 而 ready 方法 可 以 接收 一 个 匿名 函数 ， 
并 将 该 函数 注册 为 处 理 文档 就 绪 事 件 的 处 理 函 数 .: 

$(document).ready(function() { 
ee 些 操 作 


3 


一 


这 样 ， 只 要 DOM 初始 化 工作 一 完成 ， 就 会 调用 ready， 相 应 地 就 会 立即 执行 传 入 的 回调 函 

数 。 

如 果 想 像 使 用 addLoadEvent 国 数 一 样 使 用 jQuery 的 方法 ， 只 要 把 addLoadEvent 替换 成 $ 就 可 
以 了 : 


function myFucntion() { 
// 在 页 面 加 载 后 执行 一 些 操作 


} 

$(myFunction); 

或 者 干脆 这 样 写 : 
$(function() { 

和 加 载 后 执行 一 些 操作 


3 


A.5.2 ”其 他 事件 
除了 加 载 事件 , jQuery 等 库 还 提供 很 多 特定 于 元 素 的 事件 , 例如 blur、 focus、 click、 dblclick、 


mouseover、mouseout 和 submit， 等 等 。 
使 用 这 些 事 件 方法 ， 可 以 为 DOM 元 素 批量 注册 事件 处 理 函 数 ， 比 如 为 页 面 中 的 每 个 链接 注 
册 相 同 的 click 事件 处 理 函 数 : 


$('a').click( function(event) { 
// 在 新 窗口 中 打开 当前 href 中 的 链接 
window.open(this.getAttribute('href' )); 
// 阻止 链接 的 默认 动作 
return false; 


}); 
这 些 方法 还 有 另 一 种 意外 的 用 法 , 即 在 没有 用 户 交 互 的 情况 下 , 你 可 以 通过 调用 相应 的 方法 
来 触发 元 素 上 已 经 广 册 的 事件 监听 器 。 


$('a:first').click(); 
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举例 来 说 ， 下 面 是 第 12 章 的 resetFields 和 prepareForms 函数 : 


function resetFields (whichform) { 
for (var i=0; i<whichform.elements.length; i++) { 
var element = whichform.elements[i]; 
if (element.type == "submit") continue; 
var hasPlaceholder = element.placeholder || element.getAttribute('placeholder'); 
if (!hasplaceholder) continue; 
element.onfocus = function() { 
Var text = element.placeholder || element.getAttribute('placeholder'); 
if (this.value == text) { 
this.className = "'; 


this.value = ""; 


element.onblur = function() { 
if (this.value == "") { 
this.className = 'placeholder'; 
this.value = element.placeholder || element.getAttribute('placeholder' );; 


} 


element.onblur(); 


} 


function prepareForms() { 
for (var i=0; ix<document.forms.length; i++) { 
Var thisform = document.forms[i]; 
resetFields (thisform); 


} 


addLoadEvent(prepareForms) 


使 用 jQuery 选择 器 和 事件 方法 ， 以 上 准备 表单 的 代码 可 以 缩短 为 : 


$(function() { 
$('form input[placeholder]').focus(function(){ 
var input = $(this); 
if (input.val() == input.attr('placeholder')) { 
input.val('').removeClass('placeholder').; 


} 
}) .blur(function(){ 
var input = $(this); 
if (input.val() == ''){ 
input.val(input.attr('placeholder' )).addClass('placeholder' ); 


} 
}) .blur(); 


3 


A.6 Ajax 


Ajax 应 用 爆发 后 ，JavaScript 库 也 变 得 越 来 越 流行 起 来 。 很 多 库 中 的 第 一 个 对 象 就 是 Ajax， 
即便 不 是 ，Ajax 对 象 也 是 这 些 库 迅 速 流 行 的 一 个 重要 原因 。 


A.6.1 Prototype 与 Ajax 


最 早 源 于 Ruby on Rails 项 目的 Prototype 库 ， 就 是 因 Ajax 对 象 而 流行 的 。Prototype 提供 了 几 
种 独特 的 Ajax 方法 : 
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口 Ajax.Request(ur1，options) 执 行 基本 的 XMLHttpRequest 请 求 ; 

口 Ajax.Updater(element, url, options) 包 装 请 求 ， 并 且 将 请 求 返回 的 内 容 自动 添加 到 给 定 的 
DOM 节点 中 ; 
口 Ajax.Periodicalupdater(element，url1，options) 按 照 一 定 的 时 间 间 隔 自动 将 请 求 返 回 的 内 


容 添加 到 给 定 的 DOM 市 点 中 。 


以 上 每 个 方法 中 的 options 参数 都 包含 下 列 属性 。 


口 
口 


口 


口 


口 


contentType， 即 请 求 的 内 容 类 型 。 默 认 值 为 application/x-www-form-urlencoded。 

ethod， 即 请 求 的 HTTP 方法 。Prototype 对 于 put 和 delete 等 请 求 的 处 理 方式 ， 以 post 

请 求 重 写 并 将 原始 请 求 方法 放 到 请 求 的 _method 参数 中 。 默 认 值 为 post。 

parameters， 即 与 请 求 一 同 发 送 的 参数 。 这 些 参数 的 格式 可 以 是 类 似 get 请 求 中 URL 编码 

的 字符 串 ， 也 可 以 是 类 似 散 列 的 对 象 ， 比 如 数组 或 以 属性 名 表示 参数 名 的 对 象 。 

postBody， 默 认 值 为 nul1， 即 在 post 请 求 体 中 包含 的 内 容 。 如 果 为 空 ， 请 求 体 中 将 包含 

parameters 选项 的 内 容 。 

requestHeaders， 是 一 个 对 象 或 数组 ， 可 以 通过 它 在 请 求 中 添加 额外 的 头 部 信息 。 如 果 是 

对 象 ， 属 性 名 和 值 分 别 表示 请 求 头 部 的 名 和 值 ; 如 果 是 数组 ， 则 偶数 索引 项 〈 从 0 开始 算 ) 

表示 头 部 信息 的 名 称 ， 奇 数 索引 项 (从 1 开始 算 ) 表示 请 求 头 部 信息 的 值 。 默 认 情 况 下 ， 

Prototype 会 在 这 个 属性 中 包含 几 个 头 部 信息 ( 重 写 就 没有 了 ): 

国 X-Requested-With， 默 认 情 况 下 为 XMLHttpRequest， 供 服务 器 端 识别 Ajax 请 求 用 。 你 可 
以 根据 自己 的 需要 设置 。 

国 X-Prototype-Version，Prototype 当前 的 版 本 号 。 

国 Accept ， 默 认 设置 为 text/javascript、text/html、application/xml、text/xml 和 */*。 

加 Content-type， 根 据 contentType 的 值 和 编码 方式 构建 。 


除了 这 些 属性 外 , 还 可 以 在 请 求 的 不 同 阶段 根据 服务 器 的 响应 调用 一 些 回调 方法 。 下 列 每 一 
个 回调 方法 都 应 该 接收 到 两 个 参数 ， 一 个 是 XMLHttpRequest 对 象 ， 另 一 个 在 响应 包含 X-JSON 头 
部 的 情况 下 是 响应 返回 的 JavaScript 对 象 。 如 果 没 有 X-JSON 头 部 信息 ， 则 第 二 个 参数 为 nu11。 
唯一 一 个 例外 是 onException 回调 方法 ， 它 的 参数 一 个 是 Ajax.Request 实例 ， 另 一 个 是 异常 对 象 。 
下 面 以 它们 在 请 求 中 被 调用 的 顺序 列 出 了 这 些 回 调 方 法 。 


口 


口 


口 


OnException(ajax.request,exception) 在 请 求 或 响应 中 出 现 错误 时 被 调用 ， 可 能 会 在 下 面 任 
何 一 个 回调 方法 执行 期 间 同 时 发 生 。 
onUninitialized(XHRrequest ,json) 在 请 求 对 象 创建 完 成 后 可 能 会 被 调用 ， 但 不 一 定 总 会 被 
调用 ， 因 此 尽量 不 要 使 用 它 。 
onLoading(XHRrequest ,json) 在 对 象 创建 完成 且 其 连接 打开 时 可 能 会 被 调用 , 但 同样 不 一 定 
总 会 被 调用 ， 因 此 尽量 不 要 使 用 它 。 

onLoaded(XHRrequest ,json) 在 请 求 对 象 创建 完成 、 连 接 打开 且 准 备 好 发 送 请 求 时 可 能 会 被 
调用 ， 但 同样 不 一 定 总 会 被 调用 ， 因 此 尽量 不 要 使 用 它 。 
onInteractive(XHRrequest ,json) 在 请 求 对 象 接收 到 部 分 响应 但 尚未 接收 到 全 部 响应 时 可 能 
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会 被 调用 。 没 错 ， 它 同样 不 一 定 总 会 被 调用 ， 因 此 尽量 不 要 使 用 它 。 


口 on### (XHRrequest ,json) 在 适当 的 响应 代码 被 设置 时 会 


被 调用 。### 是 用 来 表示 响应 情况 的 


HTTP 状态 代码 。 这 个 回调 方法 会 在 响应 完成 但 尚未 调用 onComplete 之 前 被 调用 。 这 个 


法 也 会 阻止 onSuccess 和 onFailure 回调 方法 的 执行 。 


数值 时 被 调用 。 


299 之 间 时 被 调用 。 


口 onFailure(XHRrequest,json) 在 请 求 完 成 且 有 状态 代码 但 其 状态 代码 不 是 200 到 299 之 间 的 


口 onSuccess(XHRrequest,json) 在 请 求 完成 且 状 态 代码 没有 定义 ， 或 者 状态 代码 介 于 200 到 


口 onComplete(XHRrequest ,json) 在 请 求 过 程 的 最 后 被 调用 。 
Prototype 还 提供 了 一 个 全 局 Ajax.Responders 方法 ， 


用 于 控制 和 访问 进 进 出 出 各 种 


Ajax.Request 方法 的 Ajax 请 求 。 要 了 解 有 关 Ajax.Responders 方法 的 详细 情况 ， 请 参考 Prototype 


的 在 线 文档 http://www.prototypejs.org/api/ajax/responders。 
以 下 是 使 用 Prototype 发 送 Ajax 请 求 的 几 个 例子 


// Prototype Ajax.Request 

// 创建 一 个 新 的 一 次 性 请 求 并 在 成 功 时 弹出 消息 

new Ajax.Request( 
‘some-server-side-script.php', 


method: get ， 
onSuccess: function (transport) { 


Var response = transport.responseText || "no response text"; 


alert('Ajax.Request was successful: ' + response); 


onFailure: function (){ 
alert('Ajax.Request failed ); 


} 
); 


// Prototype Ajax.Updater 


// 创建 一 个 一 次 性 请 求 ， 以 responseText 来 填充 可 jax-updater-target 元 素 


new Ajax.Updater( 
$('ajax-updater-target' ), 
'some-server-side-script.php', 


method: ‘get', 
// 将 其 添加 到 目标 元 素 的 上 部 
insertion: Insertion.Top 


} 
2 


// Prototype Ajax.periodicalUpdater 


// 创建 一 个 周期 性 的 请 求 ， 每 10 秒 钟 自动 填充 一 次 # ajax-periodic-target 元 素 


new Ajax.PeriodicalUpdater( 
$('ajax-periodic-target' ), 
'some-server-side-script.php '， 


method: 'GET', 

// 添加 到 现 有 内 容 的 上 方 
insertion: Insertion.Top, 
// 每 10 秒 钟 运行 一 次 


A.6 Ajax 281 


frequency: 10 
); 
Ajax.Updater 对 象 的 另 一 个 简单 但 却 很 给 力 的 用 法 ， 是 隔 一 段 时 间 保存 一 次 表单 信息 。 这 特 
别 适合 在 博客 应 用 中 解决 用 户 临 时 保存 数据 的 问题 。 使 用 Ajax.Updater() 对 象 ， 再 配合 Prototype 
的 Form 序列 化 方法 ， 可 以 从 表单 中 取得 当前 的 信息 ， 每 隔 几 分 钟 就 保存 到 服务 器 一 次 ， 从 而 保 
证 用 户 不 会 意外 丢失 已 经 花 时 间 填 写 的 内 容 。 


// 使 用 Prototype 实现 自动 保存 功能 
// 每 30 秒 钟 就 保存 一 次 #utosave-form 表 单 中 的 信息 
// 然后 更 新 加 utosave-status 元 素 标明 更 新 状态 
setTimeout (function() { 
new Ajax.Updater( 
$('autosave-status' ), 
' some-server-side-autosave-script.php '， 


method: 'post', 
parameters : $('autosave-form').serialize(true) 


); 
},30000); 
A.6.2 jQuery 与 Ajax 


为 了 比较 语法 上 的 异同 ， 接 下 来 看 一 看 jQuery。jQuery 也 有 一 个 低级 的 $.ajax 方 法 ， 可 以 接 
受 各 种 属性 。 不 过 ， 还 是 先 来 看 看 它 的 那些 简单 易 用 的 方法 吧 。 
口 $.post(ur1，params，callback) 通 过 POST 请 求 取 得 数据 。 
口 $.get(ur1，params，callback) 通 过 GET 请 求 取 得 数据 。 
口 $.getJSON(ur1，params，callback) 取 得 JSON 对 象 。 
口 $.getScript(ur1，callback) 取 得 并 执行 JavaScript 文件 。 

这 些 方 法 实际 上 都 是 $.ajax() 的 包装 方法 ,它们 的 回调 方法 总 会 被 作为 $.ajax() 的 成 功 回 调 方 
法 调用 。 每 个 回调 方法 都 接受 两 个 参数 ， 分 别 是 请 求 对 象 的 响应 文本 (responseText) 和 状态 
(status): 

$.get('some-server-side-script.php', 

{ key: 'value' }, 


function(responseText, status){ 
// 你 的 代码 


} 
); 
状态 是 以 下 几 个 值 之 一 : 
口 success 
口 error 
口 notmodified 


在 使 用 getJSON 和 getScript 方法 时 响应 会 被 求 值 ， 因 此 getJSON 方 法 中 传 给 回调 的 参数 是 一 
个 JavaScript 对 象 。 
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下 面 再 给 出 几 个 使 用 上 述 方法 的 例子 


// 使 用 $.get() 实 现 快速 的 Ajax 调 
// 创建 一 个 一 次 性 的 请 求 并 在 成 功 时 弹出 消息 
$,get( some-server-side-script.php', 
{ key: 'value' }, 
function(TesponseText， status){ 
alert('successful: ' + responseText); 


); 


// 使 用 $.getJSON() 加 载 JSON 对 象 

// 创建 一 个 一 次 性 的 请 求 加 载 SON 文件 并 在 成 功 时 弹出 消息 

$.getJSON(' some-server-side-script.php', function(json){ 
alert('successful: ”+ json.type); 


)); 

jQuery 还 提供 了 一 个 10ad() 方 法 : 

口 $(expression) .1oad(ur1，params，callback) 把 URL 的 结果 加 载 到 相应 的 DOM 元素 中 。 
这 个 方法 会 以 返回 的 结果 自动 填充 相应 的 一 个 或 多 个 元 素 : 


// $(...).10ad() 用 于 自动 填充 元 素 
// 创建 一 个 一 次 性 的 请 求 ， responseText 的 内 容 填充 加 jax-updater-target 元 素 
$(" "#ajax- updater-target").10oad( 
'some-server-side-script.php', 
{ key: 'value' }, 
function(responseText, status) { 
alert('successful: ”+ responseText); 


} 
); 
Prototype 的 Ajax.Updater() 方 法 与 此 也 是 类 似 的 。 
而 且 ， 也 可 以 使 用 $() 方 法 实现 周期 性 的 保存 功能 


// 使 用 jQuery 实现 自动 保存 功能 
// 每 30 秒 钟 保存 一 次 #autosave-form 表 单 的 信息 
// 然后 更 新 如 utosave-status 元 素 标明 更 新 状态 
setTimeout(function() { 
$('autosave-status' ).10ad( 
‘some-server-side-script.php', 
$.param({ 
title:$('#autosave-form input[@name=title]').val(), 
story:$('#autosave-form textarea[@name=story]' ).val() 


}, 1 

jQuery 还 有 一 些 Ajax 插件 ， 例如 Mike Alsup 的 Ajax Form 插件 (http://plugins.jquery.com/) 
就 让 处 理 表单 和 Ajax 事件 变 得 很 容易 。 想 要 像 第 12 章 那样 通过 Ajax 提交 评论 表单 吗 ? 就 这 么 
简单 : 


$('#commentForm' ).ajaxForm(function() { 
alert("Thank you for your comment!"); 


3 


这 个 方法 会 将 表单 的 内 容 序列 化 ， 然 后 将 结果 发 送 给 表单 的 action 属性 中 指定 的 脚本 。 
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A.7 ”动画 和 效果 


到 现在 为 止 ， 我 们 已 经 知道 使 用 库 能 


些 视觉 上 的 冲击 和 交互 效果 。 


完成 很 多 DOM 操作 和 脚本 任务 了 。 下 面 我 们 来 享受 一 


有 些 库 (如 jQuery) 会 内 置 一 些 效果 属性 ， 而 另 一 些 库 则 会 依赖 插件 来 提供 效果 方法 。 如 果 
你 选择 的 库 没 有 效果 方法 ， 建 议 考 处 一 下 Moo.fx 和 Script.aculo.us。 
口 Moo.fx (http://moofx.mad4milk.net/) 把 自身 描述 为 “一 个 超 轻 量 、 超 小 巧 、 超 精简 的 


JavaScript 效果 库 ， 可 以 配合 


prototype.js 或 mootools 框架 使 用 。” 总 的 来 说 ，Moo.fx 的 使 


用 还 是 非常 方便 的 ， 它 采用 了 一 种 低 抽象 度 的 方式 ， 让 你 指出 元 素 以 及 想 要 在 给 定 的 时 


间 间 隔 内 修改 哪个 CSS 属 


性 。 这 些 修改 只 会 应 用 到 特定 的 元 素 ， 不 会 应 用 到 该 元 素 的 子 


元 素 (除非 子 元 素 根据 层 受 规则 会 继承 相应 的 CSS 属性 ) 。 利 用 这 些 低 抽象 度 的 特性 ,不 
用 编写 太 多 代码 ， 就 可 以 创造 出 几乎 任何 你 能 够 想到 的 效果 。 
D Script.aculo.us (http://script.aculo.us) 呢 ， 它 “是 一 个 好 用 、 跨 浏览 器 的 JavaScript 用 户 


界面 库 ， 能 够 让 你 的 网 站 和 有 


Web 应 用 动 起 来 。 


方式 ， 提 供 了 一 些 核心 效果 以 及 在 此 基础 上 的 组 
指定 元 素 的 所 有 子 元 素 可 能 


Script.aculo.us 采用 的 是 一 种 高 抽象 度 的 


合 效 果 。 在 应 用 这 些 高 级 效果 的 情况 下 ， 
也 会 受到 影响 。 例 如 ,在 某 个 段落 上 调用 Effect.Scale 时 , 字 


体 的 大 小 也 会 随 着 段落 及 其 他 子 元 素 的 宽度 和 高 度 的 变化 而 同步 缩放 。 这 些 高 级 效果 的 


组 合 让 应 用 大 型 、 复 杂 的 效果 变 


得 比较 简单 ， 值 得 考虑 。 


以 上 这 两 个 效果 库 都 是 构建 在 Prototype 基础 上 的 ，Moo.fx 也 有 基于 MooTools 库 的 版 本 


(http://mootools.net/) 。 


注意 Moo.fx 需要 通过 $() 和 $$() 方 法 取得 元 素 ， 因 此 再 重申 一 次 ， 如 果 你 使 用 的 是 这 个 库 ， 那 


么 就 要 在 混合 多 个 库 时 倍加 小 心 。 


A.7.1 基于 CSS 属性 的 动画 
动画 的 最 基本 形式 ， 就 是 随 着 时 间 推 移 改变 一 个 元 素 的 CSS 属性 ， 比 如 下 面 这 个 我 们 在 第 


10 章 看 到 过 的 moveElement 函数 : 


建议 查看 文档 ， 采 取 最 佳 方式 避免 冲突 。 


function moveElement(elementID,final x,final y,interval) { 


if (!document.getElementById) 


if (ldocument.getElementById(elementID)) return false; 


return false; 


var elem = document.getElementById(elementID); 


if (elem.movement) { 


clearTimeout (elem.movement); 


if (lelem.style.left) { 
elem,. style.left = "Opx"; 


} 
if (lelem.style.top) { 
elem.style.top = "Opx"; 
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var xpos = parseInt(elem.style.left); 

var ypos = parseInt(elem.style.top); 

var dist = 0; 

if (xpos == final x && ypos == final y) { 
return true; 


} 
if (xpos < final x) { 

dist = Math.ceil((final x - xpos)/10); 
xpos = xpos + dist; 


} 

if (xpos > final x) { 
dist = Math.ceil((xpos - final x)/10); 
xpos = xpos - dist; 


if (ypos < final y) { 
dist = Math.ceil((final y - ypos)/10); 
ypos = ypos + dist; 


if (ypos > final y) { 
dist = Math.ceil((ypos - final y)/10); 

ypos = ypos - dist; 

elem.style.left = xpos + "px"; 

elem.style.top = ypos + "px"; 

var Tepeat = “moveElement('"+elementID+"',"+final x+","+final y+"," 
elem.movement = setTimeout(repeat,interval); 


} 

使 用 计时 器 和 数学 公式 的 问题 在 于 ， 代 码 会 在 不 知 不 觉 中 变 得 非 
之 类 的 库 可 以 为 我 们 提供 很 大 的 帮助 。 

上 面 这 个 moveElement 函数 是 通过 链接 的 鼠标 事件 触发 的 : 


var links = list,.getElementsByTagName("a"); 

// 为 mouseover 事件 添加 动画 行为 

links[0].onmouseover = function() { 
moveElement("preview" ,-100,0,10); 


links[1].onmouseover = function() { 
moveElement("preview" ,-200,0,10); 


links[2].onmouseover = function() { 
moveElement("preview" ,-300,0,10); 


} 


+interval+")"; 


第 复 杂 见 长。 好 在 jQuery 


我 们 可 以 把 moveElement 相关 的 逻辑 集中 起 来 , 通过 jQuery 的 animate 方法 来 为 preview 元 素 
应 用 位 置 动画 。 这 个 animate 方 法 以 CSS 属性 及 最 终 值 的 列表 作为 参数 ， 能 够 按照 指定 的 时 间 间 


隔 从 当前 值 开 始 修改 相应 的 属性 值 。 


$('a').each(function(i) { 
Var preview = $('#preview' ); 
Var final x = i * -100; 
$(this).mouseover(function( ){ 
preview.animate({left:final x}, 10); 


); 
)); 
这 就 比 第 10 章 的 代码 简单 多 了 。 使 用 jQuery 只 需 几 行 代码 ， 而 上 且 


和 计时 器 问题 。 


| 不必 担心 复杂 的 数学 计算 


当然 ， 还 不 止 于 此 ， 你 还 可 以 控制 动画 的 变化 过 程 。jQuery 的 animate 方法 为 此 还 接受 另 一 
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个 参数 : 

$(expression).animate( properties, duration, easing ) 

第 三 个 参数 easing 是 一 个 函数 , 用 于 计算 动画 在 特定 时 间 段 内 的 速度 。 这 些 函 数 涉及 的 数学 
计算 有 时 候 会 非常 复杂 ， 但 借助 它们 来 改变 速度 却 能 创建 出 精彩 的 谈 入 淡出 以 及 弹跳 效果 。 
jQuery 库 中 默认 的 缓 动 函数 只 有 默认 的 swing 和 速度 恒定 的 1inear。 

要 想得到 更 多 缓 动 函 数 ， 可 以 在 jQuery UI 套件 (http://jqueryui.com/) 或 jQuery 缓 动 插件 
(http://gsgd.co.uk/sandbox/jquery/easing) 中 去 找 。 


A.7.2 ”组 合 动画 


不 少 库 都 提供 了 一 些 组 合 动画 ， 以 方便 开发 人 员 使 用 。 例 如 ， 在 不 用 插件 的 情况 下 ，jQuery 
提供 了 下 列 方法 。 
口 fadeIn 和 fade0ut。 
D fadeTo 将 匹配 元 素 的 不 透明 度 调整 到 指定 的 值 。 
口 slideToggle、slideDown 和 slideUp 用 “请 移动 画 ” 隐 藏 和 显示 匹配 的 元 素 。 
其 他 库 ， 比 如 Script.aculo.us， 还 提供 了 更 多 高 级 动画 效果 ， 比 如 下 面 这 些 。 
口 Effect.Appear、Effect.Fade 
ffect .Puff 
ffect .DropOut 
ffect .Shake 
ffect .SwitchofT 
ffect.B1indDow 和 Effect .Bl1induUp 
ffect .91ideDow 和 Effect.S1ideUp 
ffect .Pulsate 
ffect .9quish 
ffect .Fold 
ffect .Grow 
ffect. Shrink 


A.7.3 注意 可 访问 性 


在 使 用 恰当 的 情况 下 , 微妙 的 效果 可 以 起 到 提示 变更 的 作用 。 动画 和 效果 也 可 以 把 人 的 注意 
力 吸引 到 界面 的 茶 个 地 方 ， 从 而 引导 交互 顺利 进行 , 或 者 只 是 让 访客 感到 惊喜 并 给 人 留 下 难忘 的 
印象 ， 为 没有 什么 新 意 的 HTML 添加 一 点 生命 气息 。 

请 注意 ， 应 用 效果 时 要 时 刻 提醒 自己 注意 可 访问 性 。 看 上 去 美不胜收 的 各 种 效果 ， 如 果 影响 
到 访客 顺利 查看 信息 ， 您 怕 就 得 不 偿 失 了 。 


所 :1 国 轩 加 4 国 二 国 ; 回国 > 国 3 切 国 
EAI 
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A.8 小 结 


在 本 附录 中 ,我 们 探讨 了 为 什么 库 能 够 帮 我 们 简化 日 常 的 编程 工作 。 篇 幅 所 限 ,不 可 能 面 面 
俱 到 地 谈 到 所 有 库 或 者 库 的 所 有 功能 。 为 此 ,请 感 兴趣 的 读者 自行 查阅 相关 库 的 文档 ， 从 而 全 面 
了 解 库 的 特点 ， 作 出 正确 的 选择 。 

选择 库 的 时 候 ， 一 定 要 全 面 考察 自己 看 中 的 每 一 个 候选 库 。 搞 清楚 如 何 处 理 库 之 间 的 冲突 ， 
功能 太 少 还 是 太 多 ， 有 没有 坚强 的 社区 做 后 盾 ， 或 者 说 能 否 得 到 及 时 的 技术 支持 。 在 选 定 了 合适 
的 库 以 后 , 还 要 尽 可 能 发 挥 出 这 个 库 的 最 大 效用 。 与 此 同时 , 最 好 能 够 进一步 理解 库 的 工作 原理 。 
依赖 于 库 不 要 紧 ， 关 键 是 不 要 只 停留 在 简单 的 使 用 这 个 表面 上 。 


| 四 灵 蛆 印 设 计 从 书 FS 系列 


Pro HITML5 Programming 


Powerfal Apls for Richer Internet Application Development 


HTML5 
高 级 程序 设计 


[ 荷 ] Peter Lubbers 
[ 美 ] Brian Albers 著 
Frank Salim 
李 杰 柳 靖 刘 铬 译 


引领 下 一 代 Web 开 发 潮流 
全 面 涵盖 开创 性 HTML5 API 
真实 示例 ， 轻 松 上 手 


地 大 民 邮 岂 出 版 社 


Ts 国 灵 桓 包 设计 从 尾 


SS Mastery 
Advanced Web Standards Solutions Emre 


精通 CSS 
高 级 Web 标 准 解决 方案 (第 版) 


Andy Budd 
[3 
Cameron Moll 


多 人 民 邮 电 出 版 社 


“本 书 不 愧 为 经 典 ， 文 笔 清 新 ， 深 入 浅 出 ， 不 知 不 觉 让 你 掌握 良好 的 编程 原则 ， 明 白 为 什么 要 遵守 标准 。” 
一 一 Slashdot 


“我 要 隆重 推荐 本 书 ， 它 前 所 未 有 地 演示 了 DOM 脚 本 编程 的 真正 潜力 。 无 论 你 是 JavaScript 新 手 还 是 专家 ， 本 书 都 值 
得 你 拥有 。” 
一 一 Garrett Dimon，Digital-Web.com 杂 志 专 栏 作家 


DOM Scripting 
Web Design with JavaScript and the Document Object Model] ET yn 


JavaScript DOM 编 程 艺 术 (第 ?版 ) 


JavaScript 是 Web 开发 中 重要 的 一 门 语言 ， 它 强大 而 优美 。 无论 是 桌面 开发 ， 还 是 移动 应 用 ， 
JavaScript 都 是 必须 掌握 的 技术 。W3C 的 DOM 标 准 是 开发 Web 应 用 的 基石 ， 已 经 得 到 所 有 现代 浏览 器 的 支 
持 ， 这 使 得 跨 平 台 Web 开 发 成 了 一 件 轻松 民意 的 事 。 

本 书 是 超级 畅销 书 的 升级 版 ， 由 倡导 Web 标 准 的 领军 人 物 执 笔 ， 揭 示 了 前 端 开 发 的 真 请， 是 学 习 
JavaScript 和 DOM 开 发 的 佳作 。 

本 书 在 简洁 明快 地 讲述 JavaScript 和 DOM 的 基本 知识 之 后 ， 通 过 几 个 实例 演示 了 专业 水 准 的 网 页 开发 技 
术 , 透彻 阐述 了 平稳 退化 等 一 批 至 关 重 要 的 JavaScript 编 程 原则 和 良好 的 开发 实践 , 并 全 面 探讨 了 HTML5 
以 及 jQuery 等 JavaScript 库 。 读 者 将 看 到 JavaScript、HTML5 和 CSS 如 何 协作 来 创建 易 用 的 、 与 标准 兼容 的 
Web 设 计 , 掌握 使 用 JavaScript 和 DOM 通 过 客户 端 动态 效果 和 用 户 控制 的 动画 来 加 强 Web 页 面 的 必 备 技术 ， 
同时 ， 还 将 对 如 何 利用 库 提 高 开发 效率 有 全 面 深 入 的 理解 。 


AptessS" 


ISBN 978-7-115-24999-9 
图 灵 社 区 : www.ituring.com.cn 
新 浪 微 博 ，@ 图 灵 教 育 @ 图 灵 社 区 
反馈 /投稿 /推荐 信箱 : contact@turingbook.com 
热线 : (010)51095186 转 604 
9 787115 249999 > 


计算 机 /网 页 制作 / JavaScript ISBN 978-7-115-24999-9 


人 民 邮 电 出 版 社 网 址 : www.ptpress.com.cn 定价 :49.00 元 


看 完了 


如 果 您 对 本 书 内 容 有 疑问 ， 可 发 邮件 至 contact@turingbook.com， 会 有 编辑 或 作 
译 者 协助 答疑 。 也 可 访问 图 灵 社 区 ， 参 与 本 书 讨论 。 


如 果 是 有 关 电 子 书 的 建议 或 问题 ， 请 联系 专用 客服 邮箱 : 


ebook@turingbook.com。 
在 这 可 以 找到 我 们 : 


微 博 @ 图 灵 教育 : 好 书 、 活 动 每 日 播报 

微 博 @ 图 灵 社 区 : 电子 书 和 好 文章 的 消息 

微 博 @ 图 灵 新 知 : 图 灵 教 育 的 科普 小 组 

微 信 图 灵 访 谈 : ituring_interview， 讲 述 码 农 精彩 人 生 
微 信 图 灵 教 育 : turingbooks 


